Sidebar 12

1import { AppSidebar } from "@/registry/base-vega/blocks/sidebar-12/components/app-sidebar"
2import {
3  Breadcrumb,
4  BreadcrumbItem,
5  BreadcrumbList,
6  BreadcrumbPage,
7} from "@/registry/base-vega/ui/breadcrumb"
8import { Separator } from "@/registry/base-vega/ui/separator"
9import {
10  SidebarInset,
11  SidebarProvider,
12  SidebarTrigger,
13} from "@/registry/base-vega/ui/sidebar"
14 
15export default function Page() {
16  return (
17    <SidebarProvider>
18      <AppSidebar />
19      <SidebarInset>
20        <header className="sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
21          <SidebarTrigger className="-ml-1" />
22          <Separator
23            orientation="vertical"
24            className="mr-2 data-vertical:h-4 data-vertical:self-auto"
25          />
26          <Breadcrumb>
27            <BreadcrumbList>
28              <BreadcrumbItem>
29                <BreadcrumbPage>October 2024</BreadcrumbPage>
30              </BreadcrumbItem>
31            </BreadcrumbList>
32          </Breadcrumb>
33        </header>
34        <div className="flex flex-1 flex-col gap-4 p-4">
35          <div className="grid auto-rows-min gap-4 md:grid-cols-5">
36            {Array.from({ length: 20 }).map((_, i) => (
37              <div key={i} className="aspect-square rounded-xl bg-muted/50" />
38            ))}
39          </div>
40        </div>
41      </SidebarInset>
42    </SidebarProvider>
43  )
44}