Drawer

1"use client";
2 
3import * as React from "react";
4import { Drawer as DrawerPrimitive } from "vaul";
5 
6import { cn } from "@/lib/utils";
7 
8function Drawer(props: React.ComponentProps<typeof DrawerPrimitive.Root>) {
9  return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
10}
11const DrawerTrigger = DrawerPrimitive.Trigger;
12const DrawerClose = DrawerPrimitive.Close;
13const DrawerPortal = DrawerPrimitive.Portal;
14 
15function DrawerOverlay({
16  className,
17  ...props
18}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
19  return (
20    <DrawerPrimitive.Overlay
21      data-slot="drawer-overlay"
22      className={cn(
23        "fixed inset-0 z-50 bg-black/52 backdrop-blur-[5px] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
24        className,
25      )}
26      {...props}
27    />
28  );
29}
30 
31function DrawerContent({
32  className,
33  children,
34  ...props
35}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
36  return (
37    <DrawerPortal>
38      <DrawerOverlay />
39      <DrawerPrimitive.Content
40        data-slot="drawer-content"
41        className={cn(
42          "group/drawer fixed inset-x-0 bottom-0 z-50 flex max-h-[92svh] flex-col rounded-t-[2rem] border border-b-0 border-foreground/12 bg-background/97 shadow-[0_-28px_90px_-34px_color-mix(in_oklch,var(--foreground)_38%,transparent),inset_0_1px_0_color-mix(in_oklch,var(--background)_80%,transparent)] backdrop-blur-xl outline-none",
43          className,
44        )}
45        {...props}
46      >
47        <div className="mx-auto mt-3 h-1.5 w-12 shrink-0 rounded-full bg-foreground/18 transition-colors group-data-[vaul-dragging=true]/drawer:bg-primary/60" />
48        {children}
49      </DrawerPrimitive.Content>
50    </DrawerPortal>
51  );
52}
53 
54function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
55  return (
56    <div
57      data-slot="drawer-header"
58      className={cn("grid gap-1.5 p-6 text-center sm:text-left", className)}
59      {...props}
60    />
61  );
62}
63function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
64  return (
65    <div
66      data-slot="drawer-footer"
67      className={cn("mt-auto flex flex-col gap-2 p-6 pt-2", className)}
68      {...props}
69    />
70  );
71}
72function DrawerTitle({
73  className,
74  ...props
75}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
76  return (
77    <DrawerPrimitive.Title
78      data-slot="drawer-title"
79      className={cn("text-xl font-semibold tracking-[-0.035em]", className)}
80      {...props}
81// … truncated