Sidebar-3

1import { AppSidebar } from "../../components/app-sidebar"
2import { AppHeader } from "../../components/app-header"
3import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar"
4import { MessageCircle } from "lucide-react"
5 
6// Customize the expanded sidebar width via the `--sidebar-width` CSS variable.
7const SIDEBAR_PROVIDER_STYLE = {
8    "--sidebar-width": "17rem",
9} as React.CSSProperties
10 
11export default function Page() {
12    return (
13        <SidebarProvider defaultOpen={false} className="min-h-0 flex-1" style={SIDEBAR_PROVIDER_STYLE}>
14            <AppSidebar />
15            <SidebarInset className="bg-background">
16                <AppHeader />
17                <main className="flex flex-1 flex-col items-center justify-center p-8">
18                    <div className="flex max-w-2xl flex-col items-center text-center">
19                        <div className="mb-6 flex size-14 items-center justify-center rounded-2xl bg-foreground/5">
20                            <MessageCircle className="size-7 text-foreground/70" />
21                        </div>
22                        <h1 className="mb-3 text-3xl font-semibold tracking-tight text-foreground">
23                            How can I help you today?
24                        </h1>
25                        <p className="mb-8 max-w-md text-muted-foreground">
26                            Start a new conversation or select an existing chat from the
27                            sidebar.
28                        </p>
29                    </div>
30                </main>
31            </SidebarInset>
32        </SidebarProvider>
33    )
34}