Alert Dialog

1"use client";
2 
3import * as React from "react";
4import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
5 
6import { cn } from "@/lib/utils";
7import { buttonVariants } from "@/components/ui/button";
8 
9const AlertDialog = AlertDialogPrimitive.Root;
10const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
11const AlertDialogPortal = AlertDialogPrimitive.Portal;
12 
13function AlertDialogOverlay({
14  className,
15  ...props
16}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
17  return (
18    <AlertDialogPrimitive.Overlay
19      data-slot="alert-dialog-overlay"
20      className={cn(
21        "fixed inset-0 z-50 bg-black/52 backdrop-blur-[6px] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
22        className,
23      )}
24      {...props}
25    />
26  );
27}
28 
29function AlertDialogContent({
30  className,
31  ...props
32}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
33  return (
34    <AlertDialogPortal>
35      <AlertDialogOverlay />
36      <AlertDialogPrimitive.Content
37        data-slot="alert-dialog-content"
38        className={cn(
39          "fixed left-1/2 top-1/2 z-50 grid w-[calc(100%-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 gap-6 overflow-hidden rounded-3xl border border-foreground/12 bg-background/96 p-7 shadow-[0_40px_110px_-30px_color-mix(in_oklch,var(--foreground)_42%,transparent),inset_0_1px_0_color-mix(in_oklch,var(--background)_82%,transparent)] backdrop-blur-xl outline-none before:absolute before:inset-x-8 before:top-0 before:h-px before:bg-gradient-to-r before:from-transparent before:via-primary/70 before:to-transparent data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
40          className,
41        )}
42        {...props}
43      />
44    </AlertDialogPortal>
45  );
46}
47 
48function AlertDialogHeader({
49  className,
50  ...props
51}: React.ComponentProps<"div">) {
52  return (
53    <div
54      data-slot="alert-dialog-header"
55      className={cn("grid gap-2 text-center sm:text-left", className)}
56      {...props}
57    />
58  );
59}
60 
61function AlertDialogFooter({
62  className,
63  ...props
64}: React.ComponentProps<"div">) {
65  return (
66    <div
67      data-slot="alert-dialog-footer"
68      className={cn(
69        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
70        className,
71      )}
72      {...props}
73    />
74  );
75}
76 
77function AlertDialogTitle({
78  className,
79// … truncated