Sheet

import { Sheet } from '@highlight/ui'

export default function SheetBasic() {
  return (
    <Sheet>
      <Sheet.Trigger>Open details</Sheet.Trigger>
      <Sheet.Content>
        <Sheet.Header>
          <Sheet.Title>Meeting details</Sheet.Title>
          <Sheet.Description>Slides in from the right; the page stays visible behind it.</Sheet.Description>
        </Sheet.Header>
        <Sheet.Body>
          <p className="text-foreground/70 text-sm">
            Body scrolls independently when content is taller than the viewport.
          </p>
        </Sheet.Body>
        <Sheet.Footer>
          <Sheet.Close variant="secondary">Cancel</Sheet.Close>
          <Sheet.Close variant="primary">Save</Sheet.Close>
        </Sheet.Footer>
      </Sheet.Content>
    </Sheet>
  )
}

import { Sheet } from '@highlight/ui'

const SIDES = ['left', 'right', 'top', 'bottom'] as const

export default function SheetSides() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      {SIDES.map((side) => (
        <Sheet key={side}>
          <Sheet.Trigger variant="secondary" size="small" className="capitalize">
            {side}
          </Sheet.Trigger>
          <Sheet.Content side={side}>
            <Sheet.Header>
              <Sheet.Title className="capitalize">{side}</Sheet.Title>
            </Sheet.Header>
            <Sheet.Body>
              <p className="text-foreground/70 text-sm">
                Horizontal sheets are 600px wide; vertical ones are 300px tall.
              </p>
            </Sheet.Body>
          </Sheet.Content>
        </Sheet>
      ))}
    </div>
  )
}