Drawer

import { Button } from "@booleanpress/ui/button"
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@booleanpress/ui/drawer"

const RESULTS = [
  { label: "Delivered", value: "12,431" },
  { label: "Bounced", value: "37" },
  { label: "Complaints", value: "2" },
]

export default function DrawerBasic() {
  return (
    <Drawer>
      <DrawerTrigger asChild>
        <Button variant="outline">View today’s deliveries</Button>
      </DrawerTrigger>
      <DrawerContent>
        <div className="mx-auto w-full max-w-sm">
          <DrawerHeader>
            <DrawerTitle>Today’s deliveries</DrawerTitle>
            <DrawerDescription>Primary mailer, 4 October 2026. Drag the bar down to close.</DrawerDescription>
          </DrawerHeader>
          <dl className="grid grid-cols-3 gap-3 px-4.5">
            {RESULTS.map((result) => (
              <div key={result.label} className="rounded-lg border p-3 text-center">
                <dt className="text-xs/normal text-muted-foreground">{result.label}</dt>
                <dd className="text-xl font-semibold tabular-nums">{result.value}</dd>
              </div>
            ))}
          </dl>
          <DrawerFooter>
            <Button>Open the delivery log</Button>
            <DrawerClose asChild>
              <Button variant="outline">Close</Button>
            </DrawerClose>
          </DrawerFooter>
        </div>
      </DrawerContent>
    </Drawer>
  )
}

import { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon } from "lucide-react"
import { Button } from "@booleanpress/ui/button"
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@booleanpress/ui/drawer"

const SIDES = [
  { direction: "top", label: "Top", icon: ArrowDownIcon },
  { direction: "left", label: "Start", icon: ArrowRightIcon },
  { direction: "right", label: "End", icon: ArrowLeftIcon },
] as const

export default function DrawerSides() {
  return (
    <div className="flex flex-wrap justify-center gap-2">
      {SIDES.map(({ direction, label, icon: Icon }) => (
        <Drawer key={direction} direction={direction}>
          <DrawerTrigger asChild>
            <Button variant="outline">
              <Icon className="rtl:rotate-180" />
              {label}
            </Button>
          </DrawerTrigger>
          <DrawerContent>
            <DrawerHeader>
              <DrawerTitle>Notifications</DrawerTitle>
              <DrawerDescription>Three mailers need your attention.</DrawerDescription>
            </DrawerHeader>
            <ul className="flex flex-col gap-2 px-4.5 text-sm/normal">
              <li>Backup: the password was rejected.</li>
              <li>Marketing: 37 bounces since midnight.</li>
              <li>Receipts: the daily limit is 90 % used.</li>
            </ul>
            <DrawerFooter>
              <DrawerClose asChild>
                <Button variant="outline">Close</Button>
              </DrawerClose>
            </DrawerFooter>
          </DrawerContent>
        </Drawer>
      ))}
    </div>
  )
}

import { useSyncExternalStore } from "react"
import { Button } from "@booleanpress/ui/button"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@booleanpress/ui/dialog"
import { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger } from "@booleanpress/ui/drawer"
import { Input } from "@booleanpress/ui/input"
import { Label } from "@booleanpress/ui/label"

const QUERY = "(min-width: 768px)"

function useWide() {
  return useSyncExternalStore(
    (onChange) => {
      const media = window.matchMedia(QUERY)
      media.addEventListener("change", onChange)
      return () => media.removeEventListener("change", onChange)
    },
    () => window.matchMedia(QUERY).matches,
    () => true
  )
}

function KeyForm() {
  return (
    <div className="flex flex-col gap-2 px-4.5 pb-4.5 md:px-0 md:pb-0">
      <Label htmlFor="key-name">Key name</Label>
      <Input id="key-name" defaultValue="Production server" />
      <Button className="mt-2">Create key</Button>
    </div>
  )
}

export default function DrawerResponsive() {
  const wide = useWide()
  const title = "Create an API key"
  const description = "The key is shown once, so copy it before you close this."

  if (wide) {
    return (
      <Dialog>
        <DialogTrigger asChild>
          <Button variant="outline">Create an API key</Button>
        </DialogTrigger>
        <DialogContent size="sm">
          <DialogHeader>
            <DialogTitle>{title}</DialogTitle>
            <DialogDescription>{description}</DialogDescription>
          </DialogHeader>
          <KeyForm />
        </DialogContent>
      </Dialog>
    )
  }
  return (
    <Drawer>
      <DrawerTrigger asChild>
        <Button variant="outline">Create an API key</Button>
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>{title}</DrawerTitle>
          <DrawerDescription>{description}</DrawerDescription>
        </DrawerHeader>
        <KeyForm />
      </DrawerContent>
    </Drawer>
  )
}

import { Button } from "@booleanpress/ui/button"
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@booleanpress/ui/drawer"

const EVENTS = Array.from({ length: 30 }, (_, index) => ({
  id: 1040 + index,
  to: `customer${index + 1}@example.com`,
  status: index % 9 === 4 ? "Bounced" : "Delivered",
  time: `09:${String(index * 2).padStart(2, "0")}`,
}))

export default function DrawerScrollable() {
  return (
    <Drawer>
      <DrawerTrigger asChild>
        <Button variant="outline">Open the delivery log</Button>
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Delivery log</DrawerTitle>
          <DrawerDescription>30 messages sent this morning, 4 October 2026.</DrawerDescription>
        </DrawerHeader>
        <ul className="min-h-0 flex-1 divide-y overflow-y-auto px-4.5 text-sm/normal">
          {EVENTS.map((event) => (
            <li key={event.id} className="flex items-center justify-between gap-4 py-2">
              <span className="truncate">{event.to}</span>
              <span className="shrink-0 text-muted-foreground tabular-nums">
                {event.status} · {event.time}
              </span>
            </li>
          ))}
        </ul>
        <DrawerFooter>
          <DrawerClose asChild>
            <Button variant="outline">Close</Button>
          </DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}