MicroClub Drawer

1'use client';
2import * as React from 'react';
3import { Drawer as McDrawerPrimitive } from 'vaul';
4import { cn } from '@/lib/utils';
5 
6function McDrawer({ ...props }: React.ComponentProps<typeof McDrawerPrimitive.Root>) {
7  return <McDrawerPrimitive.Root data-slot="drawer" {...props} />;
8}
9 
10function McDrawerTrigger({ ...props }: React.ComponentProps<typeof McDrawerPrimitive.Trigger>) {
11  return <McDrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
12}
13 
14function McDrawerPortal({ ...props }: React.ComponentProps<typeof McDrawerPrimitive.Portal>) {
15  return <McDrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
16}
17 
18function McDrawerClose({ ...props }: React.ComponentProps<typeof McDrawerPrimitive.Close>) {
19  return <McDrawerPrimitive.Close data-slot="drawer-close" {...props} />;
20}
21 
22function McDrawerOverlay({
23  className,
24  ...props
25}: React.ComponentProps<typeof McDrawerPrimitive.Overlay>) {
26  return (
27    <McDrawerPrimitive.Overlay
28      data-slot="drawer-overlay"
29      className={cn(
30        'fixed inset-0 z-50 bg-foreground/20',
31        'supports-backdrop-filter:backdrop-blur-xs',
32        'data-open:animate-in data-open:fade-in-0',
33        'data-closed:animate-out data-closed:fade-out-0',
34        className
35      )}
36      {...props}
37    />
38  );
39}
40 
41function McDrawerContent({
42  className,
43  children,
44  ...props
45}: React.ComponentProps<typeof McDrawerPrimitive.Content>) {
46  return (
47    <McDrawerPortal>
48      <McDrawerOverlay />
49      <McDrawerPrimitive.Content
50        data-slot="drawer-content"
51        className={cn(
52          'group/drawer-content fixed z-50 flex flex-col',
53          'bg-popover text-popover-foreground',
54          'shadow-2xl',
55          'data-[vaul-drawer-direction=bottom]:inset-x-0',
56          'data-[vaul-drawer-direction=bottom]:bottom-0',
57          'data-[vaul-drawer-direction=bottom]:max-h-dvh',
58          'data-[vaul-drawer-direction=bottom]:rounded-t-2xl',
59          'data-[vaul-drawer-direction=bottom]:border',
60          'data-[vaul-drawer-direction=bottom]:border-border',
61          'data-[vaul-drawer-direction=top]:inset-x-0',
62          'data-[vaul-drawer-direction=top]:top-0',
63          'data-[vaul-drawer-direction=top]:max-h-dvh',
64          'data-[vaul-drawer-direction=top]:rounded-b-2xl',
65          'data-[vaul-drawer-direction=top]:border',
66          'data-[vaul-drawer-direction=top]:border-border',
67          'data-[vaul-drawer-direction=left]:inset-y-0',
68          'data-[vaul-drawer-direction=left]:left-0',
69// … truncated