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}
11 
12function DrawerTrigger({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
13  return <DrawerPrimitive.Trigger data-slot='drawer-trigger' {...props} />
14}
15 
16function DrawerPortal({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
17  return <DrawerPrimitive.Portal data-slot='drawer-portal' {...props} />
18}
19 
20function DrawerClose({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Close>) {
21  return <DrawerPrimitive.Close data-slot='drawer-close' {...props} />
22}
23 
24function DrawerOverlay({
25  className,
26  ...props
27}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
28  return (
29    <DrawerPrimitive.Overlay
30      data-slot='drawer-overlay'
31      className={cn(
32        'fixed inset-0 z-50 bg-black/80 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',
33        className,
34      )}
35      {...props}
36    />
37  )
38}
39 
40function DrawerContent({
41  className,
42  children,
43  ...props
44}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
45  return (
46    <DrawerPortal data-slot='drawer-portal'>
47      <DrawerOverlay />
48      <DrawerPrimitive.Content
49        data-slot='drawer-content'
50        className={cn(
51          'group/drawer-content fixed z-50 flex h-auto flex-col bg-transparent p-2 text-xs/relaxed text-popover-foreground before:absolute before:inset-2 before:-z-10 before:rounded-xl before:border before:border-border before:bg-popover 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=left]:inset-y-0 data-[vaul-drawer-direction=left]:start-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:end-0 data-[vaul-drawer-direction=right]:w-3/4 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=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm',
52          className,
53        )}
54        {...props}
55      >
56// … truncated