Use cn function

Author: avosalmon

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'
-                    } `}
+                    )}
                 >
                     <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/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}