stubs/inertia-react-ts/app/javascript/Components/ResponsiveNavLink.tsx in kaze-0.5.0 vs stubs/inertia-react-ts/app/javascript/Components/ResponsiveNavLink.tsx in kaze-0.6.0

- old
+ new

@@ -1,16 +1,21 @@ -import { Link, InertiaLinkProps } from '@inertiajs/react'; +import { Link, InertiaLinkProps } from '@inertiajs/react' -export default function ResponsiveNavLink({ active = false, className = '', children, ...props }: InertiaLinkProps & { active?: boolean }) { - return ( - <Link - {...props} - className={`w-full flex items-start ps-3 pe-4 py-2 border-l-4 ${ - active - ? 'border-indigo-400 dark:border-indigo-600 text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900/50 focus:text-indigo-800 dark:focus:text-indigo-200 focus:bg-indigo-100 dark:focus:bg-indigo-900 focus:border-indigo-700 dark:focus:border-indigo-300' - : 'border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-600 focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-700 focus:border-gray-300 dark:focus:border-gray-600' - } text-base font-medium focus:outline-none transition duration-150 ease-in-out ${className}`} - > - {children} - </Link> - ); +export default function ResponsiveNavLink({ + active = false, + className = '', + children, + ...props +}: InertiaLinkProps & { active?: boolean }) { + return ( + <Link + {...props} + className={`w-full flex items-start ps-3 pe-4 py-2 border-l-4 ${ + active + ? 'border-indigo-400 dark:border-indigo-600 text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900/50 focus:text-indigo-800 dark:focus:text-indigo-200 focus:bg-indigo-100 dark:focus:bg-indigo-900 focus:border-indigo-700 dark:focus:border-indigo-300' + : 'border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-600 focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-700 focus:border-gray-300 dark:focus:border-gray-600' + } text-base font-medium focus:outline-none transition duration-150 ease-in-out ${className}`} + > + {children} + </Link> + ) }