1import { Separator } from '@/components/ui/separator'
2import { AppSidebar } from '@/components/app-sidebar'
3import {
4    Breadcrumb,
5    BreadcrumbItem,
6    BreadcrumbLink,
7    BreadcrumbList,
8    BreadcrumbPage,
9    BreadcrumbSeparator,
10} from '@/components/ui/breadcrumb'
11import {
12    SidebarInset,
13    SidebarProvider,
14    SidebarTrigger,
15} from '@/components/ui/sidebar'
16
17export default function Page() {
18    return (
19        <SidebarProvider>
20            <AppSidebar />
21            <SidebarInset>
22                <header className="flex h-16 shrink-0 items-center gap-2 border-b border-border">
23                    <div className="flex items-center gap-2 px-3">
24                        <SidebarTrigger  variant={'outline'}/>
25                        <Separator
26                            orientation="vertical"
27                            className="mr-2 h-4"
28                        />
29                        <Breadcrumb>
30                            <BreadcrumbList>
31                                <BreadcrumbItem className="hidden md:block">
32                                    <BreadcrumbLink href="#">
33                                        Building Your Application
34                                    </BreadcrumbLink>
35                                </BreadcrumbItem>
36                                <BreadcrumbSeparator className="hidden md:block" />
37                                <BreadcrumbItem>
38                                    <BreadcrumbPage>
39                                        Data Fetching
40                                    </BreadcrumbPage>
41                                </BreadcrumbItem>
42                            </BreadcrumbList>
43                        </Breadcrumb>
44                    </div>
45                </header>
46                <div className="flex flex-1 flex-col gap-4 p-4">
47                    <div className="grid auto-rows-min gap-4 md:grid-cols-3">
48                        <div className="bg-gray-200 aspect-video rounded-xl" />
49                        <div className="bg-gray-200 aspect-video rounded-xl" />
50                        <div className="bg-gray-200 aspect-video rounded-xl" />
51                    </div>
52                    <div className="bg-gray-200 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
53                </div>
54            </SidebarInset>
55        </SidebarProvider>
56    )
57}
58