Sidebar 06

1import { AppSidebar } from "@/registry/radix-sera/blocks/sidebar-06/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="#">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          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
42            <div className="aspect-video rounded-xl bg-muted/50" />
43            <div className="aspect-video rounded-xl bg-muted/50" />
44            <div className="aspect-video rounded-xl bg-muted/50" />
45          </div>
46          <div className="min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min" />
47        </div>
48      </SidebarInset>
49    </SidebarProvider>
50  )
51}