Sheet

import { Button } from '@jamie/ui/button'
import { Field, FieldLabel } from '@jamie/ui/field'
import { Input } from '@jamie/ui/input'
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger
} from '@jamie/ui/sheet'
 
export function SheetDemo() {
  return (
    <Sheet>
      <SheetTrigger render={<Button variant="outline" />}>Meeting Settings</SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Meeting preferences</SheetTitle>
          <SheetDescription>
            Configure how Jamie processes your meetings. Changes apply to future recordings.
          </SheetDescription>
        </SheetHeader>
        <div className="flex flex-col gap-4 px-4">
          <Field>
            <FieldLabel>Default meeting title</FieldLabel>
            <Input placeholder="e.g. Weekly Finance Sync" />
          </Field>
          <Field>
            <FieldLabel>Recap recipients</FieldLabel>
            <Input placeholder="team@company.com" />
          </Field>
        </div>
        <SheetFooter>
          <SheetClose render={<Button variant="outline" />}>Cancel</SheetClose>
          <Button>Save preferences</Button>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}

'use client'
 
import { Button } from '@jamie/ui/button'
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger
} from '@jamie/ui/sheet'
 
const sides = ['top', 'right', 'bottom', 'left'] as const
 
export function SheetSideDemo() {
  return (
    <div className="flex flex-wrap gap-2">
      {sides.map((side) => (
        <Sheet key={side}>
          <SheetTrigger render={<Button variant="outline" />}>
            {side.charAt(0).toUpperCase() + side.slice(1)}
          </SheetTrigger>
          <SheetContent side={side}>
            <SheetHeader>
              <SheetTitle>Meeting details</SheetTitle>
              <SheetDescription>Sheet opening from the {side} side.</SheetDescription>
            </SheetHeader>
            <div className="px-4 text-sm text-muted-foreground">
              Q4 Budget Review — 3 participants, 45 min
            </div>
          </SheetContent>
        </Sheet>
      ))}
    </div>
  )
}