Drawer

1import * as React from 'react'
2import { Drawer as DrawerPrimitive } from 'vaul'
3import { cn } from '@/lib/utils'
4 
5const Drawer = ({
6  shouldScaleBackground = true,
7  ...props
8}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
9  <DrawerPrimitive.Root
10    shouldScaleBackground={shouldScaleBackground}
11    {...props}
12  />
13)
14Drawer.displayName = 'Drawer'
15 
16const DrawerTrigger = DrawerPrimitive.Trigger
17 
18const DrawerPortal = DrawerPrimitive.Portal
19 
20const DrawerClose = DrawerPrimitive.Close
21 
22const DrawerOverlay = React.forwardRef<
23  React.ElementRef<typeof DrawerPrimitive.Overlay>,
24  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
25>(({ className, ...props }, ref) => (
26  <DrawerPrimitive.Overlay
27    ref={ref}
28    className={cn('fixed inset-0 z-50 bg-black/70', className)}
29    {...props}
30  />
31))
32DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
33 
34const DrawerContent = React.forwardRef<
35  React.ElementRef<typeof DrawerPrimitive.Content>,
36  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
37>(({ className, children, ...props }, ref) => (
38  <DrawerPortal>
39    <DrawerOverlay />
40    <DrawerPrimitive.Content
41      ref={ref}
42      className={cn(
43        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col border-3 border-b-0 border-foreground bg-background shadow-[0px_-8px_0px_hsl(var(--shadow-color))]',
44        className
45      )}
46      {...props}
47    >
48      <div className="mx-auto mt-4 h-2 w-[100px] bg-foreground" />
49      {children}
50    </DrawerPrimitive.Content>
51  </DrawerPortal>
52))
53DrawerContent.displayName = 'DrawerContent'
54 
55const DrawerHeader = ({
56  className,
57  ...props
58}: React.HTMLAttributes<HTMLDivElement>) => (
59  <div
60    className={cn('grid gap-1.5 p-4 text-center sm:text-left', className)}
61    {...props}
62  />
63)
64DrawerHeader.displayName = 'DrawerHeader'
65 
66const DrawerFooter = ({
67  className,
68  ...props
69}: React.HTMLAttributes<HTMLDivElement>) => (
70  <div
71    className={cn('mt-auto flex flex-col gap-2 p-4', className)}
72    {...props}
73  />
74)
75DrawerFooter.displayName = 'DrawerFooter'
76 
77const DrawerTitle = React.forwardRef<
78  React.ElementRef<typeof DrawerPrimitive.Title>,
79  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
80>(({ className, ...props }, ref) => (
81  <DrawerPrimitive.Title
82    ref={ref}
83    className={cn('text-lg font-bold uppercase tracking-wide leading-none', className)}
84    {...props}
85  />
86))
87DrawerTitle.displayName = DrawerPrimitive.Title.displayName
88 
89// … truncated