drawer

1"use client";
2 
3import * as React from "react";
4import { Drawer as DrawerPrimitive } from "vaul";
5 
6import { cn } from "@aomi-labs/react";
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        "bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border",
47        className,
48      )}
49      {...props}
50    >
51      <div className="bg-muted mx-auto mt-4 h-2 w-[100px] rounded-full" />
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 
95// … truncated