Glass Alert Dialog

1"use client"
2 
3import * as React from "react"
4import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
5import { cn } from "@/lib/utils"
6import { glassButtonVariants } from "./glass-button"
7 
8const GlassAlertDialog = AlertDialogPrimitive.Root
9 
10const GlassAlertDialogTrigger = AlertDialogPrimitive.Trigger
11 
12const GlassAlertDialogPortal = AlertDialogPrimitive.Portal
13 
14const GlassAlertDialogOverlay = React.forwardRef<
15  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
16  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
17>(({ className, ...props }, ref) => (
18  <AlertDialogPrimitive.Overlay
19    className={cn(
20      "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm",
21      "data-[state=open]:animate-in data-[state=closed]:animate-out",
22      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
23      className,
24    )}
25    {...props}
26    ref={ref}
27  />
28))
29GlassAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
30 
31 
32const GlassAlertDialogContent = React.forwardRef<
33  React.ElementRef<typeof AlertDialogPrimitive.Content>,
34  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
35>(({ className, ...props }, ref) => (
36  <GlassAlertDialogPortal>
37    <GlassAlertDialogOverlay />
38    <AlertDialogPrimitive.Content
39      ref={ref}
40      className={cn(
41        "fixed left-1/2 top-1/2 z-50 w-full max-w-sm -translate-x-1/2 -translate-y-1/2",
42        "rounded-2xl border border-white/20 p-6",
43        "bg-white/10 backdrop-blur-2xl",
44        "shadow-[0_8px_32px_rgba(0,0,0,0.4)]",
45        "data-[state=open]:animate-in data-[state=closed]:animate-out",
46        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
47        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
48        "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
49        "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
50        // Glass highlight
51        "before:absolute before:inset-0 before:rounded-2xl",
52        "before:bg-linear-to-b before:from-white/15 before:to-transparent before:pointer-events-none",
53        className,
54      )}
55      {...props}
56    />
57  </GlassAlertDialogPortal>
58))
59GlassAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
60 
61const GlassAlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
62// … truncated