drawer

1"use client"
2 
3import { cn } from "@/lib/utils"
4import * as React from "react"
5import { Drawer as DrawerPrimitive } from "vaul"
6 
7function Drawer({
8  ...props
9}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
10  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
11}
12 
13function DrawerTrigger({
14  ...props
15}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
16  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
17}
18 
19function DrawerPortal({
20  ...props
21}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
22  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
23}
24 
25function DrawerClose({
26  ...props
27}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
28  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
29}
30 
31function DrawerOverlay({
32  className,
33  ...props
34}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
35  return (
36    <DrawerPrimitive.Overlay
37      data-slot="drawer-overlay"
38      className={cn(
39        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
40        className,
41      )}
42      {...props}
43    />
44  )
45}
46 
47function DrawerContent({
48  className,
49  children,
50  ...props
51}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
52  return (
53    <DrawerPortal data-slot="drawer-portal">
54      <DrawerOverlay />
55      <DrawerPrimitive.Content
56        data-slot="drawer-content"
57        className={cn(
58          "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
59          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg",
60          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg",
61          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:sm:max-w-sm",
62          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:sm:max-w-sm",
63          className,
64        )}
65        {...props}
66      >
67// … truncated