Glass Dialog

1"use client"
2 
3import * as React from "react"
4import { Dialog as DialogPrimitive } from "radix-ui"
5import { X } from "lucide-react"
6import { cn } from "@/lib/utils"
7 
8const GlassDialog = DialogPrimitive.Root
9 
10const GlassDialogTrigger = DialogPrimitive.Trigger
11 
12const GlassDialogPortal = DialogPrimitive.Portal
13 
14const GlassDialogClose = DialogPrimitive.Close
15 
16const GlassDialogOverlay = React.forwardRef<
17  React.ElementRef<typeof DialogPrimitive.Overlay>,
18  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
19>(({ className, ...props }, ref) => (
20  <DialogPrimitive.Overlay
21    ref={ref}
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  />
30))
31GlassDialogOverlay.displayName = DialogPrimitive.Overlay.displayName
32 
33const GlassDialogContent = React.forwardRef<
34  React.ElementRef<typeof DialogPrimitive.Content>,
35  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
36>(({ className, children, ...props }, ref) => (
37  <GlassDialogPortal>
38    <GlassDialogOverlay />
39    <DialogPrimitive.Content
40      ref={ref}
41      className={cn(
42        "fixed left-1/2 top-1/2 z-50 w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2",
43        "rounded-2xl border border-white/20 p-6",
44        "bg-white/10 backdrop-blur-2xl",
45        "shadow-[0_8px_32px_rgba(0,0,0,0.4)]",
46        "before:absolute before:inset-0 before:rounded-2xl",
47        "before:bg-linear-to-b before:from-white/15 before:to-transparent before:pointer-events-none",
48        "data-[state=open]:animate-in data-[state=closed]:animate-out",
49        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
50        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
51        "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
52        "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
53        className,
54      )}
55      {...props}
56    >
57      <div className="relative z-10">{children}</div>
58      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-lg p-1 text-white/60 transition-all hover:text-white hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white/50">
59        <X className="h-4 w-4" />
60        <span className="sr-only">Close</span>
61      </DialogPrimitive.Close>
62// … truncated