"use client"

import { Button } from "@/registry/ui/button/button"
import { Input } from "@/registry/ui/input/input"
import { Label } from "@/registry/ui/label/label"
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/registry/ui/sheet/sheet"

export default function SheetBasicDemo() {
  return (
    <Sheet swipeDirection="right">
      <SheetTrigger render={<Button variant="outline" />}>
        Station settings
      </SheetTrigger>
      <SheetContent side="right">
        <SheetHeader>
          <SheetTitle>Station settings</SheetTitle>
          <SheetDescription>
            Adjust how station KX-42 broadcasts on the mesh. Changes apply on
            the next transmission window.
          </SheetDescription>
        </SheetHeader>
        <div className="flex flex-col gap-4">
          <div className="flex flex-col gap-2">
            <Label htmlFor="sheet-callsign">Callsign</Label>
            <Input
              id="sheet-callsign"
              defaultValue="KX-42"
              className="font-mono"
            />
          </div>
          <div className="flex flex-col gap-2">
            <Label htmlFor="sheet-frequency">Frequency</Label>
            <Input
              id="sheet-frequency"
              defaultValue="146.520 MHz"
              className="font-mono"
            />
          </div>
          <div className="flex flex-col gap-2">
            <Label htmlFor="sheet-beacon">Beacon interval</Label>
            <Input
              id="sheet-beacon"
              defaultValue="90s"
              className="font-mono"
            />
          </div>
        </div>
        <SheetFooter>
          <SheetClose render={<Button variant="ghost" />}>Cancel</SheetClose>
          <Button>Save changes</Button>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}
Draw

Examples
