Sidebar 02

1import { AppSidebar } from "@/registry/radix-sera/blocks/sidebar-02/components/app-sidebar"
2import {
3  Breadcrumb,
4  BreadcrumbItem,
5  BreadcrumbLink,
6  BreadcrumbList,
7  BreadcrumbPage,
8  BreadcrumbSeparator,
9} from "@/registry/radix-sera/ui/breadcrumb"
10import { Separator } from "@/registry/radix-sera/ui/separator"
11import {
12  SidebarInset,
13  SidebarProvider,
14  SidebarTrigger,
15} from "@/registry/radix-sera/ui/sidebar"
16 
17export default function Page() {
18  return (
19    <SidebarProvider>
20      <AppSidebar />
21      <SidebarInset>
22        <header className="sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
23          <SidebarTrigger className="-ml-1" />
24          <Separator
25            orientation="vertical"
26            className="mr-2 data-vertical:h-4 data-vertical:self-auto"
27          />
28          <Breadcrumb>
29            <BreadcrumbList>
30              <BreadcrumbItem className="hidden md:block">
31                <BreadcrumbLink href="#">Build Your Application</BreadcrumbLink>
32              </BreadcrumbItem>
33              <BreadcrumbSeparator className="hidden md:block" />
34              <BreadcrumbItem>
35                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
36              </BreadcrumbItem>
37            </BreadcrumbList>
38          </Breadcrumb>
39        </header>
40        <div className="flex flex-1 flex-col gap-4 p-4">
41          {Array.from({ length: 24 }).map((_, index) => (
42            <div
43              key={index}
44              className="aspect-video h-12 w-full rounded-lg bg-muted/50"
45            />
46          ))}
47        </div>
48      </SidebarInset>
49    </SidebarProvider>
50  )
51}