Sheet

'use client';

import { Button } from '@/registry/san-francisco/ui/button';
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from '@/registry/san-francisco/ui/sheet';

export default function SheetDemo() {
  return (
    <Sheet>
      <SheetTrigger render={<Button variant="outline">Open Sheet</Button>} />
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Sheet Title</SheetTitle>
        </SheetHeader>
        <div className="p-4">
          <p className="text-muted-foreground text-sm">This is the sheet content.</p>
        </div>
        <SheetFooter>
          <SheetClose render={<Button variant="outline">Close</Button>} />
        </SheetFooter>
      </SheetContent>
    </Sheet>
  );
}

'use client';

import { Button } from '@/registry/san-francisco/ui/button';
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from '@/registry/san-francisco/ui/sheet';

export default function SheetDemoSides() {
  return (
    <>
      <Sheet>
        <SheetTrigger render={<Button variant="outline">Right</Button>} />
        <SheetContent side="right">
          <SheetHeader>
            <SheetTitle>Right</SheetTitle>
          </SheetHeader>
        </SheetContent>
      </Sheet>
      <Sheet>
        <SheetTrigger render={<Button variant="outline">Left</Button>} />
        <SheetContent side="left">
          <SheetHeader>
            <SheetTitle>Left</SheetTitle>
          </SheetHeader>
        </SheetContent>
      </Sheet>
      <Sheet>
        <SheetTrigger render={<Button variant="outline">Top</Button>} />
        <SheetContent side="top">
          <SheetHeader>
            <SheetTitle>Top</SheetTitle>
          </SheetHeader>
        </SheetContent>
      </Sheet>
      <Sheet>
        <SheetTrigger render={<Button variant="outline">Bottom</Button>} />
        <SheetContent side="bottom">
          <SheetHeader>
            <SheetTitle>Bottom</SheetTitle>
          </SheetHeader>
        </SheetContent>
      </Sheet>
    </>
  );
}