alert-dialog

1"use client";
2
3import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
4import * as React from "react";
5
6// Utility function for merging class names
7const cn = (...inputs: (string | undefined)[]) =>
8  inputs.filter(Boolean).join(" ");
9
10const AlertDialog = AlertDialogPrimitive.Root;
11
12const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
13
14// We're removing the className from AlertDialogPortal since it doesn't accept it
15const AlertDialogPortal = ({
16  ...props
17}: AlertDialogPrimitive.AlertDialogPortalProps) => (
18  <AlertDialogPrimitive.Portal {...props} />
19);
20AlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName;
21
22const AlertDialogOverlay = React.forwardRef<
23  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
24  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
25>(({ className, ...props }, ref) => (
26  <AlertDialogPrimitive.Overlay
27    className={cn(
28      "fixed inset-0 z-50 bg-black/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
29      className
30    )}
31    {...props}
32    ref={ref}
33  />
34));
35AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
36
37const AlertDialogContent = React.forwardRef<
38  React.ElementRef<typeof AlertDialogPrimitive.Content>,
39  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
40>(({ className, ...props }, ref) => (
41  <AlertDialogPortal>
42    <AlertDialogOverlay />
43    <AlertDialogPrimitive.Content
44      ref={ref}
45      className={cn(
46        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 bg-white p-6 shadow-[0.25rem_0.25rem_0px_0px_rgba(0,0,0,1)] border-[3px] border-black sm:rounded-lg md:w-full 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 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
47        className
48      )}
49      {...props}
50    />
51  </AlertDialogPortal>
52));
53AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
54
55const AlertDialogHeader = ({
56  className,
57  ...props
58}: React.HTMLAttributes<HTMLDivElement>) => (
59  <div
60    className={cn(
61      "flex flex-col space-y-2 text-center sm:text-left",
62      className
63    )}
64    {...props}
65  />
66);
67AlertDialogHeader.displayName = "AlertDialogHeader";
68
69const AlertDialogFooter = ({
70  className,
71  ...props
72}: React.HTMLAttributes<HTMLDivElement>) => (
73  <div
74    className={cn(
75      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
76      className
77    )}
78    {...props}
79  />
80);
81AlertDialogFooter.displayName = "AlertDialogFooter";
82
83const AlertDialogTitle = React.forwardRef<
84  React.ElementRef<typeof AlertDialogPrimitive.Title>,
85  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
86>(({ className, ...props }, ref) => (
87  <AlertDialogPrimitive.Title
88    ref={ref}
89    className={cn("text-lg font-semibold", className)}
90    {...props}
91  />
92));
93AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
94
95const AlertDialogDescription = React.forwardRef<
96  React.ElementRef<typeof AlertDialogPrimitive.Description>,
97  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
98>(({ className, ...props }, ref) => (
99  <AlertDialogPrimitive.Description
100    ref={ref}
101    className={cn("text-sm text-neutral-500", className)}
102    {...props}
103  />
104));
105AlertDialogDescription.displayName =
106  AlertDialogPrimitive.Description.displayName;
107
108const AlertDialogAction = React.forwardRef<
109  React.ElementRef<typeof AlertDialogPrimitive.Action>,
110  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
111>(({ className, ...props }, ref) => (
112  <AlertDialogPrimitive.Action
113    ref={ref}
114    className={cn(
115      "inline-flex h-10 items-center justify-center rounded-md bg-black px-4 py-2 text-sm font-semibold text-white hover:bg-black/90 active:translate-y-[2px] active:translate-x-[2px] active:shadow-none focus:outline-none disabled:pointer-events-none disabled:opacity-50 shadow-[0.25rem_0.25rem_0px_0px_rgba(0,0,0,1)]",
116      className
117    )}
118    {...props}
119  />
120));
121AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
122
123const AlertDialogCancel = React.forwardRef<
124  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
125  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
126>(({ className, ...props }, ref) => (
127  <AlertDialogPrimitive.Cancel
128    ref={ref}
129    className={cn(
130      "mt-2 inline-flex h-10 items-center justify-center border-[3px] border-black rounded-md px-4 py-2 text-sm font-semibold active:translate-y-[2px] active:translate-x-[2px] active:shadow-none focus:outline-none disabled:pointer-events-none disabled:opacity-50 shadow-[0.25rem_0.25rem_0px_0px_rgba(0,0,0,1)] sm:mt-0",
131      className
132    )}
133    {...props}
134  />
135));
136AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
137
138export {
139  AlertDialog,
140  AlertDialogAction,
141  AlertDialogCancel,
142  AlertDialogContent,
143  AlertDialogDescription,
144  AlertDialogFooter,
145  AlertDialogHeader,
146  AlertDialogOverlay,
147  AlertDialogPortal,
148  AlertDialogTitle,
149  AlertDialogTrigger,
150};
151