Drawer

<HStack justify="center">
  <Drawer>
    <DrawerTrigger render={<Button variant="outline" />}>
      Open drawer
    </DrawerTrigger>
    <DrawerContent>
      <DrawerHeader>
        <DrawerTitle>Drawer title</DrawerTitle>
        <DrawerDescription>
          This is a drawer panel that slides in from the bottom.
        </DrawerDescription>
      </DrawerHeader>
      <div className="p-4">
        <p className="text-muted-foreground">Drawer content goes here.</p>
      </div>
      <DrawerFooter>
        <Button>Save changes</Button>
        <DrawerClose render={<Button variant="outline" />}>
          Cancel
        </DrawerClose>
      </DrawerFooter>
    </DrawerContent>
  </Drawer>
</HStack>

<HStack justify="center">
  <Drawer direction="right">
    <DrawerTrigger render={<Button variant="outline" />}>
      Open from right
    </DrawerTrigger>
    <DrawerContent>
      <DrawerHeader>
        <DrawerTitle>Settings</DrawerTitle>
        <DrawerDescription>
          Manage your account settings and preferences.
        </DrawerDescription>
      </DrawerHeader>
      <div className="p-4 space-y-4">
        <div className="space-y-2">
          <label className="text-sm font-medium">Display name</label>
          <input className="w-full rounded-lg border px-3 py-2 text-sm" placeholder="Enter your name" />
        </div>
        <div className="space-y-2">
          <label className="text-sm font-medium">Email</label>
          <input className="w-full rounded-lg border px-3 py-2 text-sm" placeholder="Enter your email" />
        </div>
      </div>
      <DrawerFooter>
        <Button>Save</Button>
        <DrawerClose render={<Button variant="outline" />}>
          Cancel
        </DrawerClose>
      </DrawerFooter>
    </DrawerContent>
  </Drawer>
</HStack>

<HStack justify="center">
  <Drawer direction="left">
    <DrawerTrigger render={<Button variant="outline" />}>
      Open from left
    </DrawerTrigger>
    <DrawerContent>
      <DrawerHeader>
        <DrawerTitle>Navigation</DrawerTitle>
        <DrawerDescription>
          Browse sections of the application.
        </DrawerDescription>
      </DrawerHeader>
      <div className="p-4">
        <nav className="space-y-2">
          <a href="#" className="block rounded-lg px-3 py-2 text-sm hover:bg-muted">Dashboard</a>
          <a href="#" className="block rounded-lg px-3 py-2 text-sm hover:bg-muted">Orders</a>
          <a href="#" className="block rounded-lg px-3 py-2 text-sm hover:bg-muted">Products</a>
          <a href="#" className="block rounded-lg px-3 py-2 text-sm hover:bg-muted">Customers</a>
          <a href="#" className="block rounded-lg px-3 py-2 text-sm hover:bg-muted">Settings</a>
        </nav>
      </div>
    </DrawerContent>
  </Drawer>
</HStack>

<HStack justify="center">
  <Drawer direction="top">
    <DrawerTrigger render={<Button variant="outline" />}>
      Open from top
    </DrawerTrigger>
    <DrawerContent>
      <DrawerHeader>
        <DrawerTitle>Notifications</DrawerTitle>
        <DrawerDescription>
          You have 3 unread messages.
        </DrawerDescription>
      </DrawerHeader>
      <div className="p-4 space-y-3">
        <div className="rounded-lg border p-3">
          <p className="text-sm font-medium">New order received</p>
          <p className="text-xs text-muted-foreground">2 minutes ago</p>
        </div>
        <div className="rounded-lg border p-3">
          <p className="text-sm font-medium">Payment confirmed</p>
          <p className="text-xs text-muted-foreground">1 hour ago</p>
        </div>
        <div className="rounded-lg border p-3">
          <p className="text-sm font-medium">Shipment delivered</p>
          <p className="text-xs text-muted-foreground">Yesterday</p>
        </div>
      </div>
    </DrawerContent>
  </Drawer>
</HStack>