Sidebar 11

1import { AppSidebar } from "@/registry/radix-sera/blocks/sidebar-11/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="flex h-16 shrink-0 items-center gap-2 border-b 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="#">components</BreadcrumbLink>
32              </BreadcrumbItem>
33              <BreadcrumbSeparator className="hidden md:block" />
34              <BreadcrumbItem className="hidden md:block">
35                <BreadcrumbLink href="#">ui</BreadcrumbLink>
36              </BreadcrumbItem>
37              <BreadcrumbSeparator className="hidden md:block" />
38              <BreadcrumbItem>
39                <BreadcrumbPage>button.tsx</BreadcrumbPage>
40              </BreadcrumbItem>
41            </BreadcrumbList>
42          </Breadcrumb>
43        </header>
44        <div className="flex flex-1 flex-col gap-4 p-4">
45          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
46            <div className="aspect-video rounded-xl bg-muted/50" />
47            <div className="aspect-video rounded-xl bg-muted/50" />
48            <div className="aspect-video rounded-xl bg-muted/50" />
49          </div>
50          <div className="min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min" />
51        </div>
52      </SidebarInset>
53    </SidebarProvider>
54  )
55}