Glass Drawer

1'use client'
2 
3import * as React from 'react'
4import { Drawer as DrawerPrimitive } from 'vaul'
5 
6import { cn } from '@/lib/utils'
7 
8function GlassDrawer({ shouldScaleBackground = false, ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) {
9  return <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />
10}
11GlassDrawer.displayName = 'GlassDrawer'
12 
13const GlassDrawerTrigger = DrawerPrimitive.Trigger
14 
15const GlassDrawerPortal = DrawerPrimitive.Portal
16 
17const GlassDrawerClose = DrawerPrimitive.Close
18 
19const GlassDrawerOverlay = React.forwardRef<
20  React.ComponentRef<typeof DrawerPrimitive.Overlay>,
21  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
22>(({ className, ...props }, ref) => (
23  <DrawerPrimitive.Overlay
24    ref={ref}
25    className={cn(
26      'fixed inset-0 z-50 bg-deep/20 backdrop-blur-sm dark:bg-black/40',
27      className,
28    )}
29    {...props}
30  />
31))
32GlassDrawerOverlay.displayName = 'GlassDrawerOverlay'
33 
34const GlassDrawerContent = React.forwardRef<
35  React.ComponentRef<typeof DrawerPrimitive.Content>,
36  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
37>(({ className, children, ...props }, ref) => (
38  <GlassDrawerPortal>
39    <GlassDrawerOverlay />
40    <DrawerPrimitive.Content
41      ref={ref}
42      className={cn(
43        // after:hidden kills vaul's overscroll extension — it is built for
44        // edge-attached drawers and pokes square-cornered out of a floating one.
45        'fixed inset-x-2 bottom-2 z-50 flex h-auto max-h-[85svh] flex-col rounded-3xl border border-glass-edge bg-glass-stronger backdrop-blur-2xl backdrop-saturate-150 shadow-[0_16px_48px_rgba(28,25,20,0.12)] after:hidden',
46        className,
47      )}
48      {...props}
49    >
50      <div className="mx-auto mt-3 h-1.5 w-10 rounded-full bg-foreground/15" />
51      {children}
52    </DrawerPrimitive.Content>
53  </GlassDrawerPortal>
54))
55GlassDrawerContent.displayName = 'GlassDrawerContent'
56 
57function GlassDrawerHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
58  return <div className={cn('grid gap-1.5 p-6 pb-0 text-center sm:text-left', className)} {...props} />
59}
60GlassDrawerHeader.displayName = 'GlassDrawerHeader'
61 
62function GlassDrawerFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
63  return <div className={cn('mt-auto flex flex-col gap-2 p-6', className)} {...props} />
64}
65GlassDrawerFooter.displayName = 'GlassDrawerFooter'
66 
67const GlassDrawerTitle = React.forwardRef<
68// … truncated