Drawer

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