Alert Dialog

1"use client";
2 
3import * as Dialog from "@radix-ui/react-dialog";
4import { type ComponentPropsWithoutRef, forwardRef } from "react";
5import { cn } from "@/lib/utils";
6import { glass } from "@/lib/glass";
7import { buttonVariants } from "@/components/ui/button";
8 
9export const AlertDialog = Dialog.Root;
10export const AlertDialogTrigger = Dialog.Trigger;
11export const AlertDialogPortal = Dialog.Portal;
12export const AlertDialogClose = Dialog.Close;
13 
14export const AlertDialogContent = forwardRef<
15  HTMLDivElement,
16  ComponentPropsWithoutRef<typeof Dialog.Content>
17>(({ className, children, ...props }, ref) => (
18  <AlertDialogPortal>
19    <Dialog.Overlay className="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0" />
20    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
21      <Dialog.Content
22        ref={ref}
23        className={cn(
24          glass,
25          "bg-white dark:bg-zinc-950",
26          "relative w-full max-w-[400px] overflow-hidden",
27          "duration-200 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
28          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
29          className,
30        )}
31        {...props}
32      >
33        {children}
34      </Dialog.Content>
35    </div>
36  </AlertDialogPortal>
37));
38AlertDialogContent.displayName = "AlertDialogContent";
39 
40export const AlertDialogHeader = ({
41  className = "",
42  ...props
43}: { className?: string } & ComponentPropsWithoutRef<"div">) => (
44  <div className={cn("flex flex-col gap-1.5 p-6", className)} {...props} />
45);
46 
47export const AlertDialogTitle = ({
48  className = "",
49  ...props
50}: ComponentPropsWithoutRef<typeof Dialog.Title>) => (
51  <Dialog.Title
52    className={cn("!m-0 text-xl font-semibold tracking-tight", className)}
53    {...props}
54  />
55);
56 
57export const AlertDialogDescription = ({
58  className = "",
59  ...props
60}: ComponentPropsWithoutRef<typeof Dialog.Description>) => (
61  <Dialog.Description
62    className={cn("!m-0 text-sm leading-relaxed text-current/70", className)}
63    {...props}
64  />
65);
66 
67export const AlertDialogFooter = ({
68  className = "",
69  ...props
70}: { className?: string } & ComponentPropsWithoutRef<"div">) => (
71  <div
72    className={cn(
73      "flex flex-col-reverse gap-3 p-6 pt-0 sm:flex-row sm:items-center sm:gap-4",
74      className,
75    )}
76    {...props}
77  />
78);
79 
80// … truncated