Drawer

1"use client"
2 
3import {
4  Example,
5  ExampleWrapper,
6} from "@/registry/radix-sera/components/example"
7import { Button } from "@/registry/radix-sera/ui/button"
8import {
9  Drawer,
10  DrawerClose,
11  DrawerContent,
12  DrawerDescription,
13  DrawerFooter,
14  DrawerHeader,
15  DrawerTitle,
16  DrawerTrigger,
17} from "@/registry/radix-sera/ui/drawer"
18 
19export default function DrawerExample() {
20  return (
21    <ExampleWrapper>
22      <DrawerScrollableContent />
23      <DrawerWithSides />
24    </ExampleWrapper>
25  )
26}
27 
28const DRAWER_SIDES = ["top", "right", "bottom", "left"] as const
29 
30function DrawerWithSides() {
31  return (
32    <Example title="Sides">
33      <div className="flex flex-wrap gap-2">
34        {DRAWER_SIDES.map((side) => (
35          <Drawer
36            key={side}
37            direction={
38              side === "bottom" ? undefined : (side as "top" | "right" | "left")
39            }
40          >
41            <DrawerTrigger asChild>
42              <Button
43                variant="outline"
44                className="capitalize style-sera:uppercase"
45              >
46                {side}
47              </Button>
48            </DrawerTrigger>
49            <DrawerContent className="data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]">
50              <DrawerHeader>
51                <DrawerTitle>Move Goal</DrawerTitle>
52                <DrawerDescription>
53                  Set your daily activity goal.
54                </DrawerDescription>
55              </DrawerHeader>
56              <div className="no-scrollbar overflow-y-auto px-4">
57                {Array.from({ length: 10 }).map((_, index) => (
58                  <p
59                    key={index}
60                    className="mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed style-sera:leading-relaxed"
61                  >
62                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
63                    do eiusmod tempor incididunt ut labore et dolore magna
64                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
65                    ullamco laboris nisi ut aliquip ex ea commodo consequat.
66                    Duis aute irure dolor in reprehenderit in voluptate velit
67                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
68                    occaecat cupidatat non proident, sunt in culpa qui officia
69                    deserunt mollit anim id est laborum.
70                  </p>
71                ))}
72              </div>
73// … truncated