Alert dialog

1"use client"
2
3import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
4
5import * as React from "react"
6
7import { buttonVariants } from "@/components/ui/button"
8
9import { cn } from "@/lib/utils"
10
11function AlertDialog({
12  ...props
13}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
14  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
15}
16
17function AlertDialogTrigger({
18  ...props
19}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
20  return (
21    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
22  )
23}
24
25function AlertDialogPortal({
26  ...props
27}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
28  return (
29    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
30  )
31}
32
33function AlertDialogOverlay({
34  className,
35  ...props
36}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
37  return (
38    <AlertDialogPrimitive.Overlay
39      data-slot="alert-dialog-overlay"
40      className={cn(
41        "fixed inset-0 z-50 bg-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
42        className,
43      )}
44      {...props}
45    />
46  )
47}
48
49function AlertDialogContent({
50  className,
51  ...props
52}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
53  return (
54    <AlertDialogPortal>
55      <AlertDialogOverlay />
56      <AlertDialogPrimitive.Content
57        data-slot="alert-dialog-content"
58        className={cn(
59          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-base border-2 border-border p-6 shadow-shadow duration-200 sm:max-w-lg",
60          className,
61        )}
62        {...props}
63      />
64    </AlertDialogPortal>
65  )
66}
67
68function AlertDialogHeader({
69  className,
70  ...props
71}: React.ComponentProps<"div">) {
72  return (
73    <div
74      data-slot="alert-dialog-header"
75      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
76      {...props}
77    />
78  )
79}
80
81function AlertDialogFooter({
82  className,
83  ...props
84}: React.ComponentProps<"div">) {
85  return (
86    <div
87      data-slot="alert-dialog-footer"
88// … truncated