Drawer

1"use client";
2
3import { ComponentProps } from "react";
4
5import { Drawer as DrawerPrimitive } from "vaul";
6
7import { cn } from "@/lib/utils";
8
9function Drawer({
10  ...props
11}: ComponentProps<typeof DrawerPrimitive.Root>) {
12  return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
13}
14
15function DrawerTrigger({
16  ...props
17}: ComponentProps<typeof DrawerPrimitive.Trigger>) {
18  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
19}
20
21function DrawerPortal({
22  ...props
23}: ComponentProps<typeof DrawerPrimitive.Portal>) {
24  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
25}
26
27function DrawerClose({
28  ...props
29}: ComponentProps<typeof DrawerPrimitive.Close>) {
30  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
31}
32
33function DrawerOverlay({
34  className,
35  ...props
36}: ComponentProps<typeof DrawerPrimitive.Overlay>) {
37  return (
38    <DrawerPrimitive.Overlay
39      data-slot="drawer-overlay"
40      className={cn(
41        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-gray-900/20 supports-backdrop-filter:backdrop-blur-xs",
42        className
43      )}
44      {...props}
45    />
46  );
47}
48
49function DrawerContent({
50  className,
51  children,
52  ...props
53}: ComponentProps<typeof DrawerPrimitive.Content>) {
54  return (
55    <DrawerPortal data-slot="drawer-portal">
56      <DrawerOverlay />
57      <DrawerPrimitive.Content
58        data-slot="drawer-content"
59        className={cn(
60// … truncated