Drawer

<Drawer>
  <DrawerTrigger asChild>
    <Button variant="outline">Open Drawer</Button>
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Edit Profile</DrawerTitle>
      <DrawerDescription>Make changes here.</DrawerDescription>
    </DrawerHeader>
    <div className="p-4">Content goes here.</div>
    <DrawerFooter>
      <DrawerClose asChild>
        <Button>Done</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

<Drawer>
  <DrawerTrigger asChild>
    <Button variant="outline">Submit Feedback</Button>
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Send Feedback</DrawerTitle>
      <DrawerDescription>Let us know how we can improve.</DrawerDescription>
    </DrawerHeader>
    <div className="space-y-4 p-4">
      <Input placeholder="Your name" />
      <Input placeholder="Email address" type="email" />
      <Input placeholder="What can we do better?" />
    </div>
    <DrawerFooter>
      <Button>Submit</Button>
      <DrawerClose asChild>
        <Button variant="outline">Cancel</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

<Drawer>
  <DrawerTrigger asChild>
    <Button variant="outline">View Items</Button>
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>All Items</DrawerTitle>
      <DrawerDescription>Scroll to browse the full list.</DrawerDescription>
    </DrawerHeader>
    <div className="max-h-64 overflow-y-auto p-4">
      <ul className="space-y-2">
        {items.map((item) => (
          <li key={item.id} className="rounded-md border border-border p-3">
            <p className="text-sm font-medium">{item.title}</p>
            <p className="text-xs text-muted-foreground">{item.description}</p>
          </li>
        ))}
      </ul>
    </div>
    <DrawerFooter>
      <DrawerClose asChild>
        <Button variant="outline">Close</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>