Sidebar 09

1import { AppSidebar } from "@/registry/radix-sera/blocks/sidebar-09/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      style={
21        {
22          "--sidebar-width": "350px",
23        } as React.CSSProperties
24      }
25    >
26      <AppSidebar />
27      <SidebarInset>
28        <header className="sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4">
29          <SidebarTrigger className="-ml-1" />
30          <Separator
31            orientation="vertical"
32            className="mr-2 data-vertical:h-4 data-vertical:self-auto"
33          />
34          <Breadcrumb>
35            <BreadcrumbList>
36              <BreadcrumbItem className="hidden md:block">
37                <BreadcrumbLink href="#">All Inboxes</BreadcrumbLink>
38              </BreadcrumbItem>
39              <BreadcrumbSeparator className="hidden md:block" />
40              <BreadcrumbItem>
41                <BreadcrumbPage>Inbox</BreadcrumbPage>
42              </BreadcrumbItem>
43            </BreadcrumbList>
44          </Breadcrumb>
45        </header>
46        <div className="flex flex-1 flex-col gap-4 p-4">
47          {Array.from({ length: 24 }).map((_, index) => (
48            <div
49              key={index}
50              className="aspect-video h-12 w-full rounded-lg bg-muted/50"
51            />
52          ))}
53        </div>
54      </SidebarInset>
55    </SidebarProvider>
56  )
57}