jaydip.me
1import * as React from "react"
2import { Drawer as DrawerPrimitive } from "vaul"
3
4import { cn } from "@/lib/utils"
5
6const Drawer = ({
7 shouldScaleBackground = true,
8 ...props
9}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
10 <DrawerPrimitive.Root
11 shouldScaleBackground={shouldScaleBackground}
12 {...props}
13 />
14)
15Drawer.displayName = "Drawer"
16
17const DrawerTrigger = DrawerPrimitive.Trigger
18
19const DrawerPortal = DrawerPrimitive.Portal
20
21const DrawerClose = DrawerPrimitive.Close
22
23const DrawerOverlay = React.forwardRef<
24 React.ElementRef<typeof DrawerPrimitive.Overlay>,
25 React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
26>(({ className, ...props }, ref) => (
27 <DrawerPrimitive.Overlay
28 ref={ref}
29 className={cn("fixed inset-0 z-50 bg-black/80", className)}
30 {...props}
31 />
32))
33DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
34
35const DrawerContent = React.forwardRef<
36 React.ElementRef<typeof DrawerPrimitive.Content>,
37 React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
38>(({ className, children, ...props }, ref) => (
39 <DrawerPortal>
40 <DrawerOverlay />
41 <DrawerPrimitive.Content
42 ref={ref}
43 className={cn(
44 "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
45 className
46 )}
47 {...props}
48 >
49 <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
50 {children}
51 </DrawerPrimitive.Content>
52 </DrawerPortal>
53))
54DrawerContent.displayName = "DrawerContent"
55
56const DrawerHeader = ({
57 className,
58 ...props
59}: React.HTMLAttributes<HTMLDivElement>) => (
60 <div
61 className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
62 {...props}
63 />
64)
65DrawerHeader.displayName = "DrawerHeader"
66
67const DrawerFooter = ({
68 className,
69 ...props
70}: React.HTMLAttributes<HTMLDivElement>) => (
71 <div
72 className={cn("mt-auto flex flex-col gap-2 p-4", className)}
73 {...props}
74 />
75)
76DrawerFooter.displayName = "DrawerFooter"
77
78const DrawerTitle = React.forwardRef<
79 React.ElementRef<typeof DrawerPrimitive.Title>,
80 React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
81>(({ className, ...props }, ref) => (
82 <DrawerPrimitive.Title
83 ref={ref}
84 className={cn(
85 "text-lg font-semibold leading-none tracking-tight",
86 className
87 )}
88 {...props}
89 />
90))
91DrawerTitle.displayName = DrawerPrimitive.Title.displayName
92
93const DrawerDescription = React.forwardRef<
94 React.ElementRef<typeof DrawerPrimitive.Description>,
95 React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
96>(({ className, ...props }, ref) => (
97 <DrawerPrimitive.Description
98 ref={ref}
99 className={cn("text-sm text-muted-foreground", className)}
100 {...props}
101 />
102))
103DrawerDescription.displayName = DrawerPrimitive.Description.displayName
104
105export {
106 Drawer,
107 DrawerPortal,
108 DrawerOverlay,
109 DrawerTrigger,
110 DrawerClose,
111 DrawerContent,
112 DrawerHeader,
113 DrawerFooter,
114 DrawerTitle,
115 DrawerDescription,
116}