Adding a types folder where we can store types and doing some cleanup

Author: tnylea

resources/js/components/app-sidebar.tsx

@@ -3,6 +3,7 @@ import { Link } from "@inertiajs/react"
 import { NavMain } from "@/components/nav-main"
 import { NavFooter } from "@/components/nav-footer"
 import { NavUser } from "@/components/nav-user"
+import { type NavItemType } from '@/types/navigation'
 import {
     Sidebar,
     SidebarContent,
@@ -14,22 +15,15 @@ import {
 } from "@/components/ui/sidebar"
 import ApplicationLogo from "./application-logo"
 
-interface NavItem {
-    title: string
-    url: string
-    icon: LucideIcon
-    isActive?: boolean
-}
-
-const mainNavItems: NavItem[] = [
+const mainNavItems: NavItemType[] = [
     {
         title: "Dashboard",
         url: "/dashboard",
         icon: LayoutDashboard,
     },
 ]
 
-const footerNavItems: NavItem[] = [
+const footerNavItems: NavItemType[] = [
     {
         title: "Repository",
         url: "https://github.com/laravel/react-starter-kit",

resources/js/components/heading.tsx

@@ -1,11 +1,9 @@
 import { Separator } from "@/components/ui/separator"
 
-interface HeadingProps {
+export default function Heading({ title, description }: {
     title: string;
     description?: string;
-}
-
-export default function Heading({ title, description }: HeadingProps) {
+}) {
     return (
         <>
             <div className="space-y-0.5">

resources/js/components/nav-footer.tsx

@@ -1,4 +1,5 @@
-import { type LucideIcon, ExternalLink } from "lucide-react"
+import { ExternalLink } from "lucide-react"
+import { type NavItemType } from '@/types/navigation'
 import {
     SidebarGroup,
     SidebarGroupContent,
@@ -8,18 +9,12 @@ import {
     SidebarMenuAction
 } from "@/components/ui/sidebar"
 
-interface NavItem {
-    title: string
-    url: string
-    icon: LucideIcon
-}
-
 export function NavFooter({ 
     items, 
     className,
     ...props 
 }: React.ComponentPropsWithoutRef<typeof SidebarGroup> & { 
-    items: NavItem[] 
+    items: NavItemType[] 
 }) {
     return (
         <SidebarGroup 

resources/js/components/nav-main.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { type LucideIcon } from "lucide-react"
+import { type NavItemType } from '@/types/navigation'
 import { Link } from "@inertiajs/react"
 import {
     SidebarGroup,
@@ -9,18 +9,9 @@ import {
     SidebarMenuItem,
 } from "@/components/ui/sidebar"
 
-interface NavItem {
-    title: string
-    url: string
-    icon: LucideIcon
-    isActive?: boolean
-}
-
-interface NavMainProps {
-    items?: NavItem[]
-}
-
-export function NavMain({ items = [] }: NavMainProps) {
+export function NavMain({ items = [] }: { 
+    items: NavItemType[] 
+}) {
     return (
         <SidebarGroup>
             <SidebarMenu>

resources/js/components/settings/heading.tsx

@@ -1,11 +1,9 @@
 import { Separator } from "@/components/ui/separator"
 
-interface HeadingProps {
+export default function Heading({ title, description }: {
     title: string;
     description?: string;
-}
-
-export default function Heading({ title, description }: HeadingProps) {
+}) {
     return (
         <div>
             <header>

resources/js/layouts/app-layout.tsx

@@ -8,27 +8,21 @@ import {
     BreadcrumbPage,
     BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb"
+import { type BreadcrumbItemType } from '@/types'
 import { Separator } from "@/components/ui/separator"
 import {
     SidebarInset,
     SidebarProvider,
     SidebarTrigger,
 } from "@/components/ui/sidebar"
 
-interface BreadcrumbItemType {
-    title: string
-    href: string
-}
-
-interface AppLayoutProps {
-    children: React.ReactNode
-    breadcrumbs?: BreadcrumbItemType[]
-}
-
 export default function App({ 
     children,
     breadcrumbs = [],
-}: AppLayoutProps) {
+}: {
+    children: React.ReactNode
+    breadcrumbs?: BreadcrumbItemType[]
+}) {
 
     const [isOpen, setIsOpen] = useState(() => 
         typeof window !== 'undefined' ? 

resources/js/layouts/auth/auth-card-layout.tsx

@@ -8,18 +8,16 @@ import {
     CardTitle,
 } from "@/components/ui/card"
 
-interface AuthLayoutProps {
-    children: React.ReactNode
-    name?: string
-    title?: string
-    description?: string
-}
-
 export default function AuthCardLayout({
     children,
     title,
     description
-}: AuthLayoutProps) {
+}: {
+    children: React.ReactNode
+    name?: string
+    title?: string
+    description?: string
+}) {
     const name = usePage().props.name;
     const quote = usePage().props.quote;
 

resources/js/pages/dashboard.tsx

@@ -1,12 +1,8 @@
-import { Head } from '@inertiajs/react'
 import AppLayout from "@/layouts/app-layout"
+import { type BreadcrumbItemType } from '@/types'
+import { Head } from '@inertiajs/react'
 
-interface BreadcrumbItem {
-    title: string
-    href: string
-}
-
-const breadcrumbs: BreadcrumbItem[] = [
+const breadcrumbs: BreadcrumbItemType[] = [
     {
         title: 'Dashboard',
         href: '/dashboard'

resources/js/pages/settings/appearance.tsx

@@ -2,18 +2,14 @@ import { FormEventHandler } from 'react'
 import { Head, Link, useForm, usePage } from '@inertiajs/react'
 
 import AppearanceTabs from '@/components/appearance-tabs';
+import { type BreadcrumbItemType } from '@/types'
 import SettingsHeading from "@/components/settings/heading";
 import { Label } from "@/components/ui/label";
 
 import AppLayout from '@/layouts/app-layout'
 import SettingsLayout from './layout'
 
-interface BreadcrumbItem {
-    title: string
-    href: string
-}
-
-const breadcrumbs: BreadcrumbItem[] = [
+const breadcrumbs: BreadcrumbItemType[] = [
     {
         title: 'Appearance Settings',
         href: '/settings/appearance'

resources/js/pages/settings/layout.tsx

@@ -2,38 +2,37 @@ import { Link } from "@inertiajs/react"
 import { Button } from "@/components/ui/button"
 import Heading from "@/components/heading";
 import { cn } from "@/lib/utils"
+import { type NavItemType } from '@/types/navigation'
 
 import { Separator } from "@/components/ui/separator"
 
 interface LayoutProps {
     children: React.ReactNode
 }
 
-interface NavItem {
-    title: string
-    href: string
-}
-
-const sidebarNavItems: NavItem[] = [
+const sidebarNavItems: NavItemType[] = [
     {
         title: "Profile",
-        href: "/settings/profile",
+        url: "/settings/profile",
+        icon: null
     },
     {
         title: "Password",
-        href: "/settings/password",
+        url: "/settings/password",
+        icon: null
     },
     {
         title: "Appearance",
-        href: "/settings/appearance"
+        url: "/settings/appearance",
+        icon: null
     }
 ]
 
 export default function SettingsLayout({ 
     children
 }: LayoutProps) {
     const currentPath = window.location.pathname
-    const currentItem = sidebarNavItems.find(item => currentPath === item.href)
+    const currentItem = sidebarNavItems.find(item => currentPath === item.url)
 
     return (
         <div className="p-5 sm:p-8 md:p-10">
@@ -48,16 +47,16 @@ export default function SettingsLayout({
                     <nav className="flex-col space-x-0 space-y-1 flex">
                         {sidebarNavItems.map((item) => (
                             <Button 
-                                key={item.href}
+                                key={item.url}
                                 size="sm" 
                                 variant="ghost" 
                                 asChild
                                 className={cn(
                                     "w-full justify-center justify-start",
-                                    currentPath === item.href ? "bg-muted" : "hover:underline"
+                                    currentPath === item.url ? "bg-muted" : "hover:underline"
                                 )}
                             > 
-                                <Link href={item.href} prefetch>
+                                <Link href={item.url} prefetch>
                                     {item.title}
                                 </Link>
                             </Button>