Drawer

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