chat-02

1import {
2	Breadcrumb,
3	BreadcrumbItem,
4	BreadcrumbLink,
5	BreadcrumbList,
6	BreadcrumbPage,
7	BreadcrumbSeparator,
8} from "@/components/ui/breadcrumb";
9import {
10	SidebarInset,
11	SidebarProvider,
12	SidebarTrigger,
13} from "@/components/ui/sidebar";
14import { AppSidebar } from "@/registry/blocks/chat-02/components/app-sidebar";
15 
16export default function Page() {
17	return (
18		<SidebarProvider
19			style={{
20				// @ts-expect-error
21				"--sidebar-width": "25rem",
22				"--sidebar-width-mobile": "25rem",
23			}}
24		>
25			<SidebarInset>
26				<header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
27					<Breadcrumb>
28						<BreadcrumbList>
29							<BreadcrumbItem className="hidden md:block">
30								<BreadcrumbLink href="#">
31									Building Your Application
32								</BreadcrumbLink>
33							</BreadcrumbItem>
34							<BreadcrumbSeparator className="hidden md:block" />
35							<BreadcrumbItem>
36								<BreadcrumbPage>Data Fetching</BreadcrumbPage>
37							</BreadcrumbItem>
38						</BreadcrumbList>
39					</Breadcrumb>
40					<SidebarTrigger className="-mr-1 ml-auto rotate-180" />
41				</header>
42				<div className="flex flex-1 flex-col gap-4 p-4">
43					<div className="grid auto-rows-min gap-4 md:grid-cols-3">
44						<div className="aspect-video rounded-xl bg-muted/50" />
45						<div className="aspect-video rounded-xl bg-muted/50" />
46						<div className="aspect-video rounded-xl bg-muted/50" />
47					</div>
48					<div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
49				</div>
50			</SidebarInset>
51			<AppSidebar side="right" />
52		</SidebarProvider>
53	);
54}