Sheet

import {
  Sheet,
  SheetTrigger,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription,
} from "@/registry/primitives/sheet"

export function Example() {
  return (
    <Sheet>
      <SheetTrigger>Open</SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Sheet Title</SheetTitle>
          <SheetDescription>Sheet description text.</SheetDescription>
        </SheetHeader>
      </SheetContent>
    </Sheet>
  )
}

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">Open Right</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Cell Details</SheetTitle>
      <SheetDescription>Metadata and execution history.</SheetDescription>
    </SheetHeader>
    <div className="grid gap-4 py-4">
      <div>Cell ID: cell-abc-123</div>
      <div>Last executed: 2 minutes ago</div>
    </div>
  </SheetContent>
</Sheet>

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">Open Left</Button>
  </SheetTrigger>
  <SheetContent side="left">
    <SheetHeader>
      <SheetTitle>File Browser</SheetTitle>
      <SheetDescription>Navigate your project files.</SheetDescription>
    </SheetHeader>
    <FileTree files={files} />
  </SheetContent>
</Sheet>

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">Open Bottom</Button>
  </SheetTrigger>
  <SheetContent side="bottom">
    <SheetHeader>
      <SheetTitle>Console Output</SheetTitle>
      <SheetDescription>Kernel stdout and stderr streams.</SheetDescription>
    </SheetHeader>
    <pre className="font-mono bg-muted p-4 rounded-md">
      {consoleOutput}
    </pre>
  </SheetContent>
</Sheet>

<Sheet>
  <SheetTrigger asChild>
    <Button variant="secondary" size="sm">Variables</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Variable Inspector</SheetTitle>
      <SheetDescription>Variables in the current kernel session.</SheetDescription>
    </SheetHeader>
    <div className="flex-1 overflow-auto -mx-4">
      {variables.map((v) => (
        <div key={v.name} className="flex items-center justify-between px-4 py-3 border-b">
          <div>
            <span className="font-mono text-sm">{v.name}</span>
            <p className="text-xs text-muted-foreground">{v.type}</p>
          </div>
          <span className="text-xs text-muted-foreground">{v.shape}</span>
        </div>
      ))}
    </div>
    <SheetFooter>
      <Button variant="outline" size="sm">Refresh</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline" size="sm">Menu</Button>
  </SheetTrigger>
  <SheetContent side="left">
    <SheetHeader>
      <SheetTitle>Navigation</SheetTitle>
    </SheetHeader>
    <nav className="grid gap-1 py-4">
      {navItems.map((item) => (
        <NavLink key={item.href} {...item} />
      ))}
    </nav>
  </SheetContent>
</Sheet>