Sheet

import { Button } from '@brika/clay/components/button';
import { Input } from '@brika/clay/components/input';
import { Label } from '@brika/clay/components/label';
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from '@brika/clay/components/sheet';
import { Textarea } from '@brika/clay/components/textarea';

/** Sheet with a form, useful for quick data entry without navigating away. */
export default function SheetFormDemo() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button>Add item</Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Add item</SheetTitle>
          <SheetDescription>
            Fill in the details below and click save to add the item.
          </SheetDescription>
        </SheetHeader>
        <div className="flex flex-col gap-4 px-4 py-6">
          <div className="grid gap-1.5">
            <Label htmlFor="item-name">Name</Label>
            <Input id="item-name" placeholder="Item name" />
          </div>
          <div className="grid gap-1.5">
            <Label htmlFor="item-notes">Notes</Label>
            <Textarea id="item-notes" placeholder="Optional notes…" />
          </div>
        </div>
        <SheetFooter>
          <SheetClose asChild>
            <Button variant="outline">Cancel</Button>
          </SheetClose>
          <Button>Save item</Button>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  );
}

import { Button } from '@brika/clay/components/button';
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from '@brika/clay/components/sheet';
/** Left-side sheet, commonly used as an off-canvas navigation panel. */
export default function SheetLeftDemo() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">Open nav</Button>
      </SheetTrigger>
      <SheetContent side="left">
        <SheetHeader>
          <SheetTitle>Navigation</SheetTitle>
          <SheetDescription>Browse sections of the application.</SheetDescription>
        </SheetHeader>
        <nav className="flex flex-col gap-2 px-4 py-6 text-sm">
          <a href="https://example.com" className="font-medium text-foreground hover:underline">Dashboard</a>
          <a href="https://example.com" className="text-muted-foreground hover:underline">Projects</a>
          <a href="https://example.com" className="text-muted-foreground hover:underline">Team</a>
          <a href="https://example.com" className="text-muted-foreground hover:underline">Settings</a>
        </nav>
      </SheetContent>
    </Sheet>
  );
}