Glass Sheet

1"use client"
2 
3import * as React from "react"
4import { Dialog as SheetPrimitive} from "radix-ui"
5import { cva, type VariantProps } from "class-variance-authority"
6import { X } from "lucide-react"
7import { cn } from "@/lib/utils"
8 
9const GlassSheet = SheetPrimitive.Root
10 
11const GlassSheetTrigger = SheetPrimitive.Trigger
12 
13const GlassSheetClose = SheetPrimitive.Close
14 
15const GlassSheetPortal = SheetPrimitive.Portal
16 
17const GlassSheetOverlay = React.forwardRef<
18  React.ElementRef<typeof SheetPrimitive.Overlay>,
19  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
20>(({ className, ...props }, ref) => (
21  <SheetPrimitive.Overlay
22    className={cn(
23      "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm",
24      "data-[state=open]:animate-in data-[state=closed]:animate-out",
25      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
26      className,
27    )}
28    {...props}
29    ref={ref}
30  />
31))
32GlassSheetOverlay.displayName = SheetPrimitive.Overlay.displayName
33 
34const sheetVariants = cva(
35  cn(
36    "fixed z-50 gap-4 p-6",
37    "bg-white/10 backdrop-blur-2xl border border-white/20",
38    "shadow-[0_8px_32px_rgba(0,0,0,0.4)]",
39    "transition ease-in-out duration-300",
40    "data-[state=open]:animate-in data-[state=closed]:animate-out",
41    "before:absolute before:inset-0",
42    "before:bg-gradient-to-b before:from-white/15 before:to-transparent before:pointer-events-none",
43  ),
44  {
45    variants: {
46      side: {
47        top: cn(
48          "inset-x-0 top-0 border-b rounded-b-2xl",
49          "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
50        ),
51        bottom: cn(
52          "inset-x-0 bottom-0 border-t rounded-t-2xl",
53          "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
54        ),
55        left: cn(
56          "inset-y-0 left-0 h-full w-3/4 border-r rounded-r-2xl sm:max-w-sm",
57          "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
58        ),
59        right: cn(
60          "inset-y-0 right-0 h-full w-3/4 border-l rounded-l-2xl sm:max-w-sm",
61          "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
62        ),
63      },
64    },
65    defaultVariants: {
66      side: "right",
67    },
68  },
69)
70 
71interface GlassSheetContentProps
72  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
73    VariantProps<typeof sheetVariants> {}
74 
75// … truncated