Drawer Demo

1"use client"
2 
3import {
4  Drawer,
5  DrawerClose,
6  DrawerContent,
7  DrawerDescription,
8  DrawerHeader,
9  DrawerTitle,
10  DrawerTrigger,
11} from "@/registry/loomui/drawer"
12 
13const BUTTON =
14  "border-border bg-background hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring/60 inline-flex cursor-pointer items-center justify-center rounded-md border px-4 py-2 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none active:scale-[0.98]"
15 
16export default function DrawerDemo() {
17  return (
18    <Drawer>
19      <DrawerTrigger className={BUTTON}>Open drawer</DrawerTrigger>
20 
21      <DrawerContent side="bottom">
22        <DrawerHeader>
23          <DrawerTitle>Thread settings</DrawerTitle>
24          <DrawerDescription>
25            Drag anywhere on the panel to send it away.
26          </DrawerDescription>
27        </DrawerHeader>
28 
29        <DrawerClose className={`${BUTTON} mt-auto self-start`}>
30          Done
31        </DrawerClose>
32      </DrawerContent>
33    </Drawer>
34  )
35}