Sheet

import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Are you absolutely sure?</SheetTitle>
      <SheetDescription>This action cannot be undone.</SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>)

function SheetTrigger({
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Trigger>)

function SheetClose({
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Close>)

function SheetContent({
  className,
  children,
  side = "right",
  showCloseButton = true,
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Content> & {
  side?: "top" | "right" | "bottom" | "left"
  showCloseButton?: boolean
})

function SheetHeader({ className, ...props }: React.ComponentProps<"div">)

function SheetFooter({ className, ...props }: React.ComponentProps<"div">)

function SheetTitle({
  className,
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Title>)

function SheetDescription({
  className,
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Description>)

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">Open Sheet</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Edit profile</SheetTitle>
      <SheetDescription>
        Make changes to your profile here. Click save when you're done.
      </SheetDescription>
    </SheetHeader>
    <div className="grid gap-4 py-4">
      <div className="grid grid-cols-4 items-center gap-4">
        <Label htmlFor="name" className="text-right">
          Name
        </Label>
        <Input id="name" value="Pedro Duarte" className="col-span-3" />
      </div>
    </div>
    <SheetFooter>
      <SheetClose asChild>
        <Button type="submit">Save changes</Button>
      </SheetClose>
    </SheetFooter>
  </SheetContent>
</Sheet>

<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent showCloseButton={false}>
    <SheetHeader>
      <SheetTitle>Custom Close</SheetTitle>
    </SheetHeader>
    <SheetFooter>
      <SheetClose asChild>
        <Button>Custom Close Button</Button>
      </SheetClose>
    </SheetFooter>
  </SheetContent>
</Sheet>

function ControlledSheet() {
  const [open, setOpen] = React.useState(false)

  return (
    <Sheet open={open} onOpenChange={setOpen}>
      <SheetTrigger asChild>
        <Button>Open</Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Controlled</SheetTitle>
        </SheetHeader>
      </SheetContent>
    </Sheet>
  )
}

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline" size="icon">
      <Menu className="h-4 w-4" />
    </Button>
  </SheetTrigger>
  <SheetContent side="left">
    <nav className="flex flex-col gap-4">
      <a href="/" className="text-lg font-semibold">
        Home
      </a>
      <a href="/about" className="text-lg">
        About
      </a>
      <a href="/services" className="text-lg">
        Services
      </a>
      <a href="/contact" className="text-lg">
        Contact
      </a>
    </nav>
  </SheetContent>
</Sheet>