drawer

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