1import * as React from "react"
  2import { Drawer as DrawerPrimitive } from "vaul"
  3
  4import { cn } from "@marzneshin/common/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}