Skip to content

Commit ce76f2b

Browse files
tnyleatnylea
committed
cleaning up and removing all red squiggles and problems
1 parent 00d9fbe commit ce76f2b

File tree

12 files changed

+244
-178
lines changed

12 files changed

+244
-178
lines changed

‎resources/js/components/app-header.tsx‎

Lines changed: 147 additions & 141 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,41 @@
11
import { Link, usePage } from '@inertiajs/react';
2+
import { type BreadcrumbItem } from '@/types';
23
import AppLogo from './app-logo';
34
import AppLogoIcon from './app-logo-icon';
45
import { Button } from "@/components/ui/button"
5-
import { UserInfo } from '@/components/user-info';
6+
import { Breadcrumbs } from '@/components/breadcrumbs';
67
import {
7-
NavigationMenu,
8-
NavigationMenuItem,
9-
NavigationMenuLink,
10-
NavigationMenuList,
11-
navigationMenuTriggerStyle,
12-
NavigationMenuTrigger,
13-
NavigationMenuContent,
14-
NavigationMenuIndicator,
8+
NavigationMenu,
9+
NavigationMenuItem,
10+
NavigationMenuLink,
11+
NavigationMenuList,
12+
navigationMenuTriggerStyle,
1513
} from "@/components/ui/navigation-menu"
1614
import {
17-
DropdownMenu,
18-
DropdownMenuContent,
19-
DropdownMenuGroup,
20-
DropdownMenuItem,
21-
DropdownMenuTrigger,
22-
DropdownMenuSeparator,
15+
DropdownMenu,
16+
DropdownMenuContent,
17+
DropdownMenuTrigger,
2318
} from "@/components/ui/dropdown-menu"
2419
import {
2520
Tooltip,
2621
TooltipContent,
2722
TooltipProvider,
2823
TooltipTrigger,
29-
} from "@/components/ui/tooltip"
24+
} from "@/components/ui/tooltip"
3025
import { type NavItem } from '@/types';
3126
import {
32-
Sheet,
33-
SheetContent,
34-
SheetHeader,
35-
SheetTitle,
36-
SheetTrigger,
27+
Sheet,
28+
SheetContent,
29+
SheetHeader,
30+
SheetTrigger,
3731
} from "@/components/ui/sheet"
3832
import { type SharedData } from '@/types';
3933
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
40-
import { Badge } from "@/components/ui/badge"
41-
import { Menu, ChevronDown, FolderGit2, BookOpenText, Settings, Search, HelpCircle, Home, Inbox, FileText, Calendar, Star, LogOut, Bell, CreditCard, Sparkles, User, LayoutGrid } from 'lucide-react'
34+
import { Menu, ChevronDown, FolderGit2, BookOpenText, Search, LayoutGrid } from 'lucide-react'
4235
import { useInitials } from '@/hooks/use-initials';
4336
import { cn } from "@/lib/utils";
4437
import { UserMenuContent } from '@/components/user-menu-content';
38+
import { Icon } from '@/components/icon';
4539

4640
const mainNavItems: NavItem[] = [
4741
{
@@ -52,133 +46,145 @@ const mainNavItems: NavItem[] = [
5246
];
5347

5448
const rightNavItems: NavItem[] = [
55-
{
56-
title: 'Repository',
57-
url: 'https://github.com/laravel/react-starter-kit',
58-
icon: FolderGit2,
59-
},
60-
{
61-
title: 'Documentation',
62-
url: 'https://laravel.com/docs/starter-kits',
63-
icon: BookOpenText,
64-
},
49+
{
50+
title: 'Repository',
51+
url: 'https://github.com/laravel/react-starter-kit',
52+
icon: FolderGit2,
53+
},
54+
{
55+
title: 'Documentation',
56+
url: 'https://laravel.com/docs/starter-kits',
57+
icon: BookOpenText,
58+
},
6559
];
6660

6761
const activeItemStyles = "bg-neutral-100 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100";
6862

69-
export function AppHeader() {
63+
interface AppHeaderProps {
64+
breadcrumbs?: BreadcrumbItem[];
65+
}
66+
67+
export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
7068
const { auth } = usePage<SharedData>().props;
7169
const getInitials = useInitials();
72-
return (
73-
<div className="border-b border-gray-200 ">
74-
<div className="flex h-16 items-center px-4 md:max-w-7xl mx-auto">
75-
{/* Mobile Menu */}
76-
<div className="lg:hidden">
77-
<Sheet className="bg-pink-200">
78-
<SheetTrigger asChild>
79-
<Button variant="ghost" size="icon" className="mr-2 w-[34px] h-[34px]">
80-
<Menu className="h-5 w-5" />
81-
</Button>
82-
</SheetTrigger>
83-
<SheetContent side="left" className="bg-neutral-50 h-full flex flex-col items-stretch w-64">
84-
<SheetHeader className="text-left flex justify-start">
85-
<AppLogoIcon className="h-6 w-6 fill-current text-black dark:text-white" />
86-
</SheetHeader>
87-
<div className="flex flex-col h-full space-y-4 mt-6 flex-1">
88-
<div className="flex flex-col text-sm h-full justify-between">
89-
<div className="flex flex-col space-y-4">
90-
{mainNavItems.map((item) => (
91-
<Link key={item.title} href={item.url} className="flex items-center space-x-2 font-medium">
92-
<item.icon className="h-4 w-4" />
93-
<span>{item.title}</span>
94-
</Link>
95-
))}
96-
</div>
97-
98-
<div className="flex flex-col space-y-4">
99-
{rightNavItems.map((item) => (
100-
<a key={item.title} href={item.url} target="_blank" rel="noopener noreferrer" className="flex items-center space-x-2 font-medium">
101-
<item.icon className="h-5 w-5" />
102-
<span>{item.title}</span>
103-
</a>
104-
))}
105-
</div>
106-
</div> </div>
107-
</SheetContent>
108-
</Sheet>
109-
</div>
70+
return (
71+
<>
72+
<div className="border-b border-gray-200 ">
73+
<div className="flex h-16 items-center px-4 md:max-w-7xl mx-auto">
74+
{/* Mobile Menu */}
75+
<div className="lg:hidden">
76+
<Sheet>
77+
<SheetTrigger asChild>
78+
<Button variant="ghost" size="icon" className="mr-2 w-[34px] h-[34px]">
79+
<Menu className="h-5 w-5" />
80+
</Button>
81+
</SheetTrigger>
82+
<SheetContent side="left" className="bg-neutral-50 h-full flex flex-col items-stretch w-64">
83+
<SheetHeader className="text-left flex justify-start">
84+
<AppLogoIcon className="h-6 w-6 fill-current text-black dark:text-white" />
85+
</SheetHeader>
86+
<div className="flex flex-col h-full space-y-4 mt-6 flex-1">
87+
<div className="flex flex-col text-sm h-full justify-between">
88+
<div className="flex flex-col space-y-4">
89+
{mainNavItems.map((item) => (
90+
<Link key={item.title} href={item.url} className="flex items-center space-x-2 font-medium">
91+
{item.icon && <Icon iconNode={item.icon} className="h-5 w-5" />}
92+
<span>{item.title}</span>
93+
</Link>
94+
))}
95+
</div>
11096

111-
<Link href="/dashboard" prefetch className="flex items-center space-x-2">
112-
<AppLogo />
113-
</Link>
114-
115-
{/* Desktop Navigation */}
116-
<div className="hidden lg:flex items-center space-x-6 h-full ml-6">
117-
<NavigationMenu className="h-full flex items-stretch ">
118-
<NavigationMenuList className="h-full space-x-2 flex items-stretch">
119-
120-
{mainNavItems.map((item, index) => (
121-
<NavigationMenuItem key={index} size="sm" className="h-full flex items-center relative">
122-
<Link href={item.url} legacyBehavior passHref>
123-
<NavigationMenuLink className={cn(
124-
navigationMenuTriggerStyle(),
125-
activeItemStyles,
126-
"px-3 h-9 cursor-pointer"
127-
)}>
128-
{item.icon && <item.icon className="mr-2 h-4 w-4" />}
129-
{item.title}
130-
</NavigationMenuLink>
131-
</Link>
132-
<div className="h-0.5 translate-y-px bg-black w-full absolute bottom-0 left-0"></div>
133-
</NavigationMenuItem>
134-
))}
135-
</NavigationMenuList>
136-
</NavigationMenu>
137-
</div>
97+
<div className="flex flex-col space-y-4">
98+
{rightNavItems.map((item) => (
99+
<a key={item.title} href={item.url} target="_blank" rel="noopener noreferrer" className="flex items-center space-x-2 font-medium">
100+
{item.icon && <Icon iconNode={item.icon} className="h-5 w-5" />}
101+
<span>{item.title}</span>
102+
</a>
103+
))}
104+
</div>
105+
</div>
106+
</div>
107+
</SheetContent>
108+
</Sheet>
109+
</div>
110+
111+
<Link href="/dashboard" prefetch className="flex items-center space-x-2">
112+
<AppLogo />
113+
</Link>
114+
115+
{/* Desktop Navigation */}
116+
<div className="hidden lg:flex items-center space-x-6 h-full ml-6">
117+
<NavigationMenu className="h-full flex items-stretch ">
118+
<NavigationMenuList className="h-full space-x-2 flex items-stretch">
138119

139-
<div className="ml-auto flex items-center space-x-2">
140-
<div className="relative flex items-center space-x-1">
141-
<Button variant="ghost" size="icon" className="w-9 h-9 cursor-pointer">
142-
<Search className="h-5 w-5" />
143-
</Button>
144-
<div className="hidden lg:flex space-x-1">
145-
{rightNavItems.map((item) => (
146-
<TooltipProvider delayDuration={0}>
147-
<Tooltip>
148-
<TooltipTrigger>
149-
<Button key={item.title} variant="ghost" size="icon" asChild className="w-9 h-9 cursor-pointer">
150-
<a href={item.url} target="_blank" rel="noopener noreferrer">
151-
<span className="sr-only">{item.title}</span>
152-
<item.icon className="h-5 w-5" />
153-
</a>
120+
{mainNavItems.map((item, index) => (
121+
<NavigationMenuItem key={index} className="h-full flex items-center relative">
122+
<Link href={item.url}>
123+
<NavigationMenuLink className={cn(
124+
navigationMenuTriggerStyle(),
125+
activeItemStyles,
126+
"px-3 h-9 cursor-pointer"
127+
)}>
128+
{item.icon && <Icon iconNode={item.icon} className="mr-2 h-4 w-4" />}
129+
{item.title}
130+
</NavigationMenuLink>
131+
</Link>
132+
<div className="h-0.5 translate-y-px bg-black w-full absolute bottom-0 left-0"></div>
133+
</NavigationMenuItem>
134+
))}
135+
</NavigationMenuList>
136+
</NavigationMenu>
137+
</div>
138+
139+
<div className="ml-auto flex items-center space-x-2">
140+
<div className="relative flex items-center space-x-1">
141+
<Button variant="ghost" size="icon" className="w-9 h-9 cursor-pointer">
142+
<Search className="h-5 w-5" />
154143
</Button>
155-
</TooltipTrigger>
156-
<TooltipContent>
157-
<p>{item.title}</p>
158-
</TooltipContent>
159-
</Tooltip>
160-
</TooltipProvider>
161-
))}
144+
<div className="hidden lg:flex space-x-1">
145+
{rightNavItems.map((item) => (
146+
<TooltipProvider delayDuration={0}>
147+
<Tooltip>
148+
<TooltipTrigger>
149+
<Button key={item.title} variant="ghost" size="icon" asChild className="w-9 h-9 cursor-pointer">
150+
<a href={item.url} target="_blank" rel="noopener noreferrer">
151+
<span className="sr-only">{item.title}</span>
152+
{item.icon && <Icon iconNode={item.icon} className="h-5 w-5" />}
153+
</a>
154+
</Button>
155+
</TooltipTrigger>
156+
<TooltipContent>
157+
<p>{item.title}</p>
158+
</TooltipContent>
159+
</Tooltip>
160+
</TooltipProvider>
161+
))}
162+
</div>
163+
</div>
164+
<DropdownMenu>
165+
<DropdownMenuTrigger asChild>
166+
<Button variant="ghost" className="h-9 px-1.5">
167+
<Avatar className="h-7 w-7 overflow-hidden rounded-lg">
168+
<AvatarImage src={auth.user.avatar} alt={auth.user.name} />
169+
<AvatarFallback className="rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white">
170+
{getInitials(auth.user.name)}
171+
</AvatarFallback>
172+
</Avatar>
173+
<ChevronDown className="h-4 w-4 hidden lg:block" />
174+
</Button>
175+
</DropdownMenuTrigger>
176+
<DropdownMenuContent className="w-56" align="end">
177+
<UserMenuContent user={auth.user} />
178+
</DropdownMenuContent>
179+
</DropdownMenu>
180+
</div>
181+
</div>
182+
</div>
183+
<div className="w-full flex border-b border-sidebar-border/70">
184+
<div className="flex h-12 items-center justify-start w-full px-4 md:max-w-7xl mx-auto text-neutral-500">
185+
<Breadcrumbs breadcrumbs={breadcrumbs} />
162186
</div>
163-
</div>
164-
<DropdownMenu>
165-
<DropdownMenuTrigger asChild>
166-
<Button variant="ghost" className="h-9 px-1.5">
167-
<Avatar className="h-7 w-7 overflow-hidden rounded-lg">
168-
<AvatarImage src={auth.user.avatar} alt={auth.user.name} />
169-
<AvatarFallback className="rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white">
170-
{getInitials(auth.user.name)}
171-
</AvatarFallback>
172-
</Avatar>
173-
<ChevronDown className="h-4 w-4 hidden lg:block" />
174-
</Button>
175-
</DropdownMenuTrigger>
176-
<DropdownMenuContent className="w-56" align="end">
177-
<UserMenuContent user={auth.user} />
178-
</DropdownMenuContent>
179-
</DropdownMenu>
180187
</div>
181-
</div>
182-
</div>
183-
)
188+
</>
189+
)
184190
}

‎resources/js/components/app-sidebar-header.tsx‎

Lines changed: 3 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,13 @@
1-
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
21
import { SidebarTrigger } from '@/components/ui/sidebar';
2+
import { Breadcrumbs } from '@/components/breadcrumbs';
33
import { type BreadcrumbItem as BreadcrumbItemType } from '@/types';
4-
import { Fragment } from 'react';
54

65
export function AppSidebarHeader({ breadcrumbs = [] }: { breadcrumbs?: BreadcrumbItemType[] }) {
76
return (
8-
<header className="flex h-16 shrink-0 items-center gap-2 px-4 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
7+
<header className="flex h-16 shrink-0 items-center gap-2 px-4 border-b border-sidebar-border/50 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
98
<div className="flex items-center gap-2">
109
<SidebarTrigger className="-ml-1" />
11-
{breadcrumbs.length > 0 && (
12-
<>
13-
<Breadcrumb>
14-
<BreadcrumbList>
15-
{breadcrumbs.map((item, index) => {
16-
const isLast = index === breadcrumbs.length - 1;
17-
18-
return (
19-
<Fragment key={index}>
20-
<BreadcrumbItem>
21-
{isLast ? (
22-
<BreadcrumbPage>{item.title}</BreadcrumbPage>
23-
) : (
24-
<BreadcrumbLink href={item.href}>{item.title}</BreadcrumbLink>
25-
)}
26-
</BreadcrumbItem>
27-
{!isLast && <BreadcrumbSeparator />}
28-
</Fragment>
29-
);
30-
})}
31-
</BreadcrumbList>
32-
</Breadcrumb>
33-
</>
34-
)}
10+
<Breadcrumbs breadcrumbs={breadcrumbs} />
3511
</div>
3612
</header>
3713
);

0 commit comments

Comments
 (0)