Use the latest version of actions/checkout

.github/workflows/code-quality.yml

@@ -14,7 +14,7 @@ jobs:
   quality:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Setup PHP
         uses: shivammathur/setup-php@v2

.github/workflows/tests.yml

@@ -16,7 +16,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup PHP
         uses: shivammathur/setup-php@v2
@@ -26,7 +26,7 @@ jobs:
           coverage: xdebug
 
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: '18'
           cache: 'npm'

resources/js/components/appearance-dropdown.tsx

@@ -27,7 +27,7 @@ export default function AppearanceToggleDropdown({ className = '', ...props }: H
                         <span className="sr-only">Toggle theme</span>
                     </Button>
                 </DropdownMenuTrigger>
-                <DropdownMenuContent align="end" rounded="xl">
+                <DropdownMenuContent align="end">
                     <DropdownMenuItem onClick={() => updateAppearance('light')}>
                         <span className="flex items-center gap-2">
                             <Sun className="h-5 w-5" />

resources/js/components/appearance-tabs.tsx

@@ -1,4 +1,5 @@
 import { Appearance, useAppearance } from '@/hooks/use-appearance';
+import { cn } from '@/lib/utils';
 import { LucideIcon, Monitor, Moon, Sun } from 'lucide-react';
 import { HTMLAttributes } from 'react';
 
@@ -12,16 +13,17 @@ export default function AppearanceToggleTab({ className = '', ...props }: HTMLAt
     ];
 
     return (
-        <div className={`inline-flex gap-1 rounded-lg bg-neutral-100 p-1 dark:bg-neutral-800 ${className}`} {...props}>
+        <div className={cn('inline-flex gap-1 rounded-lg bg-neutral-100 p-1 dark:bg-neutral-800', className)} {...props}>
             {tabs.map(({ value, icon: Icon, label }) => (
                 <button
                     key={value}
                     onClick={() => updateAppearance(value)}
-                    className={`flex items-center rounded-md px-3.5 py-1.5 transition-colors ${
+                    className={cn(
+                        'flex items-center rounded-md px-3.5 py-1.5 transition-colors',
                         appearance === value
                             ? 'bg-white shadow-sm dark:bg-neutral-700 dark:text-neutral-100'
-                            : 'text-neutral-500 hover:bg-neutral-200/60 hover:text-black dark:text-neutral-400 dark:hover:bg-neutral-700/60'
-                    } `}
+                            : 'text-neutral-500 hover:bg-neutral-200/60 hover:text-black dark:text-neutral-400 dark:hover:bg-neutral-700/60',
+                    )}
                 >
                     <Icon className="-ml-1 h-4 w-4" />
                     <span className="ml-1.5 text-sm">{label}</span>

resources/js/components/input-error.tsx

@@ -1,8 +1,9 @@
+import { cn } from '@/lib/utils';
 import { HTMLAttributes } from 'react';
 
 export default function InputError({ message, className = '', ...props }: HTMLAttributes<HTMLParagraphElement> & { message?: string }) {
     return message ? (
-        <p {...props} className={'text-sm text-red-600 dark:text-red-400 ' + className}>
+        <p {...props} className={cn('text-sm text-red-600 dark:text-red-400', className)}>
             {message}
         </p>
     ) : null;

resources/js/components/nav-main.tsx

@@ -12,7 +12,7 @@ export function NavMain({ items = [] }: { items: NavItem[] }) {
                     <SidebarMenuItem key={item.title}>
                         <SidebarMenuButton asChild isActive={item.url === page.url}>
                             <Link href={item.url} prefetch>
-                                <item.icon />
+                                {item.icon && <item.icon />}
                                 <span>{item.title}</span>
                             </Link>
                         </SidebarMenuButton>

resources/js/components/text-link.tsx

@@ -1,3 +1,4 @@
+import { cn } from '@/lib/utils';
 import { Link } from '@inertiajs/react';
 import { ComponentProps } from 'react';
 
@@ -6,7 +7,7 @@ type LinkProps = ComponentProps<typeof Link>;
 export default function TextLink({ className = '', children, ...props }: LinkProps) {
     return (
         <Link
-            className={`underline decoration-neutral-400 underline-offset-2 duration-300 ease-out hover:decoration-neutral-700 ${className}`}
+            className={cn('underline decoration-neutral-400 underline-offset-2 duration-300 ease-out hover:decoration-neutral-700', className)}
             {...props}
         >
             {children}

resources/js/pages/welcome.tsx

@@ -283,7 +283,7 @@ export default function Welcome() {
                         </main>
 
                         <footer className="py-16 text-center text-sm text-black dark:text-white/70">
-                            Laravel v{laravelVersion} (PHP v{phpVersion})
+                            Laravel v{laravelVersion as string} (PHP v{phpVersion as string})
                         </footer>
                     </div>
                 </div>