kaze 0.5.0 → 0.7.0

data/stubs/inertia-react-ts/app/javascript/Components/ApplicationLogo.tsx

@@ -1,12 +1,16 @@
-import { SVGAttributes } from 'react';
+import { SVGAttributes } from 'react'
 
 export default function ApplicationLogo(props: SVGAttributes<SVGElement>) {
-    return (
-        <svg {...props} viewBox="0 -6 32 32" xmlns="http://www.w3.org/2000/svg">
-            <g fill="none" fillRule="evenodd">
-                <path d="M0-6h32v32H0z"/>
-                <path fill="#c00" fillRule="nonzero" d="M.985 19.636s.422-4.163 3.375-9.087c2.954-4.924 7.99-8.65 12.083-9.017 8.144-.816 15.46 6.485 15.46 6.485s-.24.168-.494.38C23.42 2.49 18.54 5.274 17.005 6.02c-7.033 3.925-4.91 13.616-4.91 13.616H.987zM24.137 2.32c-.45-.182-.9-.35-1.364-.505l.056-.93c.885.254 1.237.423 1.363.493l-.056.943zM22.8 5.304c.45.028.915.084 1.393.183l-.056.872c-.464-.1-.928-.155-1.392-.17l.056-.885zM17.597.913c-.407 0-.815.015-1.223.058l-.268-.83c.465-.056.915-.084 1.35-.084l.282.858h-.14zm.676 5.178c.35-.154.76-.31 1.237-.45l.31.93c-.41.125-.817.294-1.225.49l-.323-.97zm-6.386-3.7c-.366.184-.718.395-1.083.62l-.647-.985c.38-.225.745-.42 1.097-.604l.633.97zm2.883 6.33c.252-.323.548-.646.87-.942l.634.957c-.31.323-.59.647-.83 1L14.77 8.72zm-2.04 4.53c.112-.506.24-1.027.422-1.547l1.012.802c-.14.548-.24 1.097-.295 1.645l-1.14-.9zM6.57 6.57c-.34.35-.662.73-.958 1.11L4.53 6.752c.323-.352.674-.704 1.04-1.055l1 .872zm-4.25 6.286c-.224.52-.52 1.21-.702 1.688L0 13.954c.14-.38.436-1.084.703-1.69l1.618.592zm10.2 3.967l1.518.548c.084.663.21 1.28.337 1.83l-1.688-.605c-.07-.422-.14-1.027-.168-1.772z"/>
-            </g>
-        </svg>
-    );
+  return (
+    <svg {...props} viewBox="0 -6 32 32" xmlns="http://www.w3.org/2000/svg">
+      <g fill="none" fillRule="evenodd">
+        <path d="M0-6h32v32H0z" />
+        <path
+          fill="#c00"
+          fillRule="nonzero"
+          d="M.985 19.636s.422-4.163 3.375-9.087c2.954-4.924 7.99-8.65 12.083-9.017 8.144-.816 15.46 6.485 15.46 6.485s-.24.168-.494.38C23.42 2.49 18.54 5.274 17.005 6.02c-7.033 3.925-4.91 13.616-4.91 13.616H.987zM24.137 2.32c-.45-.182-.9-.35-1.364-.505l.056-.93c.885.254 1.237.423 1.363.493l-.056.943zM22.8 5.304c.45.028.915.084 1.393.183l-.056.872c-.464-.1-.928-.155-1.392-.17l.056-.885zM17.597.913c-.407 0-.815.015-1.223.058l-.268-.83c.465-.056.915-.084 1.35-.084l.282.858h-.14zm.676 5.178c.35-.154.76-.31 1.237-.45l.31.93c-.41.125-.817.294-1.225.49l-.323-.97zm-6.386-3.7c-.366.184-.718.395-1.083.62l-.647-.985c.38-.225.745-.42 1.097-.604l.633.97zm2.883 6.33c.252-.323.548-.646.87-.942l.634.957c-.31.323-.59.647-.83 1L14.77 8.72zm-2.04 4.53c.112-.506.24-1.027.422-1.547l1.012.802c-.14.548-.24 1.097-.295 1.645l-1.14-.9zM6.57 6.57c-.34.35-.662.73-.958 1.11L4.53 6.752c.323-.352.674-.704 1.04-1.055l1 .872zm-4.25 6.286c-.224.52-.52 1.21-.702 1.688L0 13.954c.14-.38.436-1.084.703-1.69l1.618.592zm10.2 3.967l1.518.548c.084.663.21 1.28.337 1.83l-1.688-.605c-.07-.422-.14-1.027-.168-1.772z"
+        />
+      </g>
+    </svg>
+  )
 }

data/stubs/inertia-react-ts/app/javascript/Components/Checkbox.tsx

@@ -1,14 +1,14 @@
-import { InputHTMLAttributes } from 'react';
+import { InputHTMLAttributes } from 'react'
 
-export default function Checkbox({ className = '', ...props }: InputHTMLAttributes<HTMLInputElement>) {
-    return (
-        <input
-            {...props}
-            type="checkbox"
-            className={
-                'rounded dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-indigo-600 shadow-sm focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:focus:ring-offset-gray-800 ' +
-                className
-            }
-        />
-    );
+export default function Checkbox({
+  className = '',
+  ...props
+}: InputHTMLAttributes<HTMLInputElement>) {
+  return (
+    <input
+      {...props}
+      type="checkbox"
+      className={`rounded dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-indigo-600 shadow-sm focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:focus:ring-offset-gray-800 ${className}`}
+    />
+  )
 }

data/stubs/inertia-react-ts/app/javascript/Components/DangerButton.tsx

@@ -1,17 +1,22 @@
-import { ButtonHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes } from 'react'
 
-export default function DangerButton({ className = '', disabled, children, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) {
-    return (
-        <button
-            {...props}
-            className={
-                `inline-flex items-center px-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-500 active:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150 ${
-                    disabled && 'opacity-25'
-                } ` + className
-            }
-            disabled={disabled}
-        >
-            {children}
-        </button>
-    );
+export default function DangerButton({
+  className = '',
+  disabled,
+  children,
+  ...props
+}: ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button
+      {...props}
+      className={
+        `inline-flex items-center px-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-500 active:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150 ${
+          disabled && 'opacity-25'
+        } ${className}`
+      }
+      disabled={disabled}
+    >
+      {children}
+    </button>
+  )
 }

data/stubs/inertia-react-ts/app/javascript/Components/Dropdown.tsx

@@ -1,99 +1,126 @@
-import { useState, createContext, useContext, Fragment, PropsWithChildren, Dispatch, SetStateAction } from 'react';
-import { Link, InertiaLinkProps } from '@inertiajs/react';
-import { Transition } from '@headlessui/react';
+import {
+  useState,
+  createContext,
+  useContext,
+  Fragment,
+  PropsWithChildren,
+  Dispatch,
+  SetStateAction,
+} from 'react'
+import { Link, InertiaLinkProps } from '@inertiajs/react'
+import { Transition } from '@headlessui/react'
 
 const DropDownContext = createContext<{
-    open: boolean;
-    setOpen: Dispatch<SetStateAction<boolean>>;
-    toggleOpen: () => void;
+  open: boolean
+  setOpen: Dispatch<SetStateAction<boolean>>
+  toggleOpen: () => void
 }>({
-    open: false,
-    setOpen: () => {},
-    toggleOpen: () => {},
-});
+  open: false,
+  setOpen: () => {},
+  toggleOpen: () => {},
+})
 
 const Dropdown = ({ children }: PropsWithChildren) => {
-    const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(false)
 
-    const toggleOpen = () => {
-        setOpen((previousState) => !previousState);
-    };
+  const toggleOpen = () => {
+    setOpen((previousState) => !previousState)
+  }
 
-    return (
-        <DropDownContext.Provider value={{ open, setOpen, toggleOpen }}>
-            <div className="relative">{children}</div>
-        </DropDownContext.Provider>
-    );
-};
+  return (
+    <DropDownContext.Provider value={{ open, setOpen, toggleOpen }}>
+      <div className="relative">{children}</div>
+    </DropDownContext.Provider>
+  )
+}
 
 const Trigger = ({ children }: PropsWithChildren) => {
-    const { open, setOpen, toggleOpen } = useContext(DropDownContext);
-
-    return (
-        <>
-            <div onClick={toggleOpen}>{children}</div>
-
-            {open && <div className="fixed inset-0 z-40" onClick={() => setOpen(false)}></div>}
-        </>
-    );
-};
-
-const Content = ({ align = 'right', width = '48', contentClasses = 'py-1 bg-white dark:bg-gray-700', children }: PropsWithChildren<{ align?: 'left'|'right', width?: '48', contentClasses?: string }>) => {
-    const { open, setOpen } = useContext(DropDownContext);
-
-    let alignmentClasses = 'origin-top';
-
-    if (align === 'left') {
-        alignmentClasses = 'ltr:origin-top-left rtl:origin-top-right start-0';
-    } else if (align === 'right') {
-        alignmentClasses = 'ltr:origin-top-right rtl:origin-top-left end-0';
-    }
-
-    let widthClasses = '';
-
-    if (width === '48') {
-        widthClasses = 'w-48';
-    }
-
-    return (
-        <>
-            <Transition
-                as={Fragment}
-                show={open}
-                enter="transition ease-out duration-200"
-                enterFrom="opacity-0 scale-95"
-                enterTo="opacity-100 scale-100"
-                leave="transition ease-in duration-75"
-                leaveFrom="opacity-100 scale-100"
-                leaveTo="opacity-0 scale-95"
-            >
-                <div
-                    className={`absolute z-50 mt-2 rounded-md shadow-lg ${alignmentClasses} ${widthClasses}`}
-                    onClick={() => setOpen(false)}
-                >
-                    <div className={`rounded-md ring-1 ring-black ring-opacity-5 ` + contentClasses}>{children}</div>
-                </div>
-            </Transition>
-        </>
-    );
-};
-
-const DropdownLink = ({ className = '', children, ...props }: InertiaLinkProps) => {
-    return (
-        <Link
-            {...props}
-            className={
-                'block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out ' +
-                className
-            }
+  const { open, setOpen, toggleOpen } = useContext(DropDownContext)
+
+  return (
+    <>
+      <div onClick={toggleOpen}>{children}</div>
+
+      {open && (
+        <div
+          className="fixed inset-0 z-40"
+          onClick={() => setOpen(false)}
+        ></div>
+      )}
+    </>
+  )
+}
+
+const Content = ({
+  align = 'right',
+  width = '48',
+  contentClasses = 'py-1 bg-white dark:bg-gray-700',
+  children,
+}: PropsWithChildren<{
+  align?: 'left' | 'right'
+  width?: '48'
+  contentClasses?: string
+}>) => {
+  const { open, setOpen } = useContext(DropDownContext)
+
+  let alignmentClasses = 'origin-top'
+
+  if (align === 'left') {
+    alignmentClasses = 'ltr:origin-top-left rtl:origin-top-right start-0'
+  } else if (align === 'right') {
+    alignmentClasses = 'ltr:origin-top-right rtl:origin-top-left end-0'
+  }
+
+  let widthClasses = ''
+
+  if (width === '48') {
+    widthClasses = 'w-48'
+  }
+
+  return (
+    <>
+      <Transition
+        as={Fragment}
+        show={open}
+        enter="transition ease-out duration-200"
+        enterFrom="opacity-0 scale-95"
+        enterTo="opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="opacity-100 scale-100"
+        leaveTo="opacity-0 scale-95"
+      >
+        <div
+          className={`absolute z-50 mt-2 rounded-md shadow-lg ${alignmentClasses} ${widthClasses}`}
+          onClick={() => setOpen(false)}
         >
+          <div
+            className={`rounded-md ring-1 ring-black ring-opacity-5 ${contentClasses}`}
+          >
             {children}
-        </Link>
-    );
-};
-
-Dropdown.Trigger = Trigger;
-Dropdown.Content = Content;
-Dropdown.Link = DropdownLink;
-
-export default Dropdown;
+          </div>
+        </div>
+      </Transition>
+    </>
+  )
+}
+
+const DropdownLink = ({
+  className = '',
+  children,
+  ...props
+}: InertiaLinkProps) => {
+  return (
+    <Link
+      {...props}
+      className={`block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out ${className}`}
+    >
+      {children}
+    </Link>
+  )
+}
+
+Dropdown.Trigger = Trigger
+Dropdown.Content = Content
+Dropdown.Link = DropdownLink
+
+export default Dropdown

data/stubs/inertia-react-ts/app/javascript/Components/InputError.tsx

@@ -1,9 +1,16 @@
-import { HTMLAttributes } from 'react';
+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}>
-            {message}
-        </p>
-    ) : null;
+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}`}
+    >
+      {message}
+    </p>
+  ) : null
 }

data/stubs/inertia-react-ts/app/javascript/Components/InputLabel.tsx

@@ -1,9 +1,17 @@
-import { LabelHTMLAttributes } from 'react';
+import { LabelHTMLAttributes } from 'react'
 
-export default function InputLabel({ value, className = '', children, ...props }: LabelHTMLAttributes<HTMLLabelElement> & { value?: string }) {
-    return (
-        <label {...props} className={`block font-medium text-sm text-gray-700 dark:text-gray-300 ` + className}>
-            {value ? value : children}
-        </label>
-    );
+export default function InputLabel({
+  value,
+  className = '',
+  children,
+  ...props
+}: LabelHTMLAttributes<HTMLLabelElement> & { value?: string }) {
+  return (
+    <label
+      {...props}
+      className={`block font-medium text-sm text-gray-700 dark:text-gray-300 ${className}`}
+    >
+      {value ? value : children}
+    </label>
+  )
 }

data/stubs/inertia-react-ts/app/javascript/Components/Modal.tsx

@@ -1,68 +1,68 @@
-import { Fragment, PropsWithChildren } from 'react';
-import { Dialog, Transition } from '@headlessui/react';
+import { Fragment, PropsWithChildren } from 'react'
+import { Dialog, Transition } from '@headlessui/react'
 
 export default function Modal({
-    children,
-    show = false,
-    maxWidth = '2xl',
-    closeable = true,
-    onClose = () => {},
+  children,
+  show = false,
+  maxWidth = '2xl',
+  closeable = true,
+  onClose = () => {},
 }: PropsWithChildren<{
-    show: boolean;
-    maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-    closeable?: boolean;
-    onClose: CallableFunction;
+  show: boolean
+  maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+  closeable?: boolean
+  onClose: CallableFunction
 }>) {
-    const close = () => {
-        if (closeable) {
-            onClose();
-        }
-    };
+  const close = () => {
+    if (closeable) {
+      onClose()
+    }
+  }
 
-    const maxWidthClass = {
-        sm: 'sm:max-w-sm',
-        md: 'sm:max-w-md',
-        lg: 'sm:max-w-lg',
-        xl: 'sm:max-w-xl',
-        '2xl': 'sm:max-w-2xl',
-    }[maxWidth];
+  const maxWidthClass = {
+    sm: 'sm:max-w-sm',
+    md: 'sm:max-w-md',
+    lg: 'sm:max-w-lg',
+    xl: 'sm:max-w-xl',
+    '2xl': 'sm:max-w-2xl',
+  }[maxWidth]
 
-    return (
-        <Transition show={show} as={Fragment} leave="duration-200">
-            <Dialog
-                as="div"
-                id="modal"
-                className="fixed inset-0 flex overflow-y-auto px-4 py-6 sm:px-0 items-center z-50 transform transition-all"
-                onClose={close}
-            >
-                <Transition.Child
-                    as={Fragment}
-                    enter="ease-out duration-300"
-                    enterFrom="opacity-0"
-                    enterTo="opacity-100"
-                    leave="ease-in duration-200"
-                    leaveFrom="opacity-100"
-                    leaveTo="opacity-0"
-                >
-                    <div className="absolute inset-0 bg-gray-500/75 dark:bg-gray-900/75" />
-                </Transition.Child>
+  return (
+    <Transition show={show} as={Fragment} leave="duration-200">
+      <Dialog
+        as="div"
+        id="modal"
+        className="fixed inset-0 flex overflow-y-auto px-4 py-6 sm:px-0 items-center z-50 transform transition-all"
+        onClose={close}
+      >
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="absolute inset-0 bg-gray-500/75 dark:bg-gray-900/75" />
+        </Transition.Child>
 
-                <Transition.Child
-                    as={Fragment}
-                    enter="ease-out duration-300"
-                    enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                    enterTo="opacity-100 translate-y-0 sm:scale-100"
-                    leave="ease-in duration-200"
-                    leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-                    leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                >
-                    <Dialog.Panel
-                        className={`mb-6 bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto ${maxWidthClass}`}
-                    >
-                        {children}
-                    </Dialog.Panel>
-                </Transition.Child>
-            </Dialog>
-        </Transition>
-    );
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          enterTo="opacity-100 translate-y-0 sm:scale-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+          leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+        >
+          <Dialog.Panel
+            className={`mb-6 bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto ${maxWidthClass}`}
+          >
+            {children}
+          </Dialog.Panel>
+        </Transition.Child>
+      </Dialog>
+    </Transition>
+  )
 }

data/stubs/inertia-react-ts/app/javascript/Components/NavLink.tsx

@@ -1,18 +1,23 @@
-import { Link, InertiaLinkProps } from '@inertiajs/react';
+import { Link, InertiaLinkProps } from '@inertiajs/react'
 
-export default function NavLink({ active = false, className = '', children, ...props }: InertiaLinkProps & { active: boolean }) {
-    return (
-        <Link
-            {...props}
-            className={
-                'inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium leading-5 transition duration-150 ease-in-out focus:outline-none ' +
-                (active
-                    ? 'border-indigo-400 dark:border-indigo-600 text-gray-900 dark:text-gray-100 focus:border-indigo-700 '
-                    : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-700 focus:text-gray-700 dark:focus:text-gray-300 focus:border-gray-300 dark:focus:border-gray-700 ') +
-                className
-            }
-        >
-            {children}
-        </Link>
-    );
+export default function NavLink({
+  active = false,
+  className = '',
+  children,
+  ...props
+}: InertiaLinkProps & { active: boolean }) {
+  return (
+    <Link
+      {...props}
+      className={
+        `inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium leading-5 transition duration-150 ease-in-out focus:outline-none ${
+          active
+          ? 'border-indigo-400 dark:border-indigo-600 text-gray-900 dark:text-gray-100 focus:border-indigo-700 '
+          : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-700 focus:text-gray-700 dark:focus:text-gray-300 focus:border-gray-300 dark:focus:border-gray-700 '
+        } ${className}`
+      }
+    >
+      {children}
+    </Link>
+  )
 }

data/stubs/inertia-react-ts/app/javascript/Components/PrimaryButton.tsx

@@ -1,17 +1,22 @@
-import { ButtonHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes } from 'react'
 
-export default function PrimaryButton({ className = '', disabled, children, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) {
-    return (
-        <button
-            {...props}
-            className={
-                `inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-200 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-800 uppercase tracking-widest hover:bg-gray-700 dark:hover:bg-white focus:bg-gray-700 dark:focus:bg-white active:bg-gray-900 dark:active:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150 ${
-                    disabled && 'opacity-25'
-                } ` + className
-            }
-            disabled={disabled}
-        >
-            {children}
-        </button>
-    );
+export default function PrimaryButton({
+  className = '',
+  disabled,
+  children,
+  ...props
+}: ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button
+      {...props}
+      className={
+        `inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-200 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-800 uppercase tracking-widest hover:bg-gray-700 dark:hover:bg-white focus:bg-gray-700 dark:focus:bg-white active:bg-gray-900 dark:active:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150 ${
+          disabled && 'opacity-25'
+        } ${className}`
+      }
+      disabled={disabled}
+    >
+      {children}
+    </button>
+  )
 }

data/stubs/inertia-react-ts/app/javascript/Components/ResponsiveNavLink.tsx

@@ -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>
+  )
 }