Alert Dialog

1import * as React from 'react'
2import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
3import { cn } from '@/lib/utils'
4import { buttonVariants } from '@/components/ui/button'
5 
6const AlertDialog = AlertDialogPrimitive.Root
7 
8const AlertDialogTrigger = AlertDialogPrimitive.Trigger
9 
10const AlertDialogPortal = AlertDialogPrimitive.Portal
11 
12const AlertDialogOverlay = React.forwardRef<
13  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
14  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
15>(({ className, ...props }, ref) => (
16  <AlertDialogPrimitive.Overlay
17    className={cn(
18      'fixed inset-0 z-50 bg-black/70 ease-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
19      className
20    )}
21    {...props}
22    ref={ref}
23  />
24))
25AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
26 
27const AlertDialogContent = React.forwardRef<
28  React.ElementRef<typeof AlertDialogPrimitive.Content>,
29  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
30>(({ className, ...props }, ref) => (
31  <AlertDialogPortal>
32    <AlertDialogOverlay />
33    <AlertDialogPrimitive.Content
34      ref={ref}
35      className={cn(
36        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border-3 border-foreground bg-background p-6 shadow-[8px_8px_0px_hsl(var(--shadow-color))] duration-200 ease-out 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%]',
37        className
38      )}
39      {...props}
40    />
41  </AlertDialogPortal>
42))
43AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
44 
45const AlertDialogHeader = ({
46  className,
47  ...props
48}: React.HTMLAttributes<HTMLDivElement>) => (
49  <div
50    className={cn('flex flex-col space-y-2 text-center sm:text-left', className)}
51    {...props}
52  />
53)
54AlertDialogHeader.displayName = 'AlertDialogHeader'
55 
56const AlertDialogFooter = ({
57  className,
58  ...props
59}: React.HTMLAttributes<HTMLDivElement>) => (
60  <div
61    className={cn(
62      'flex flex-col-reverse gap-3 sm:flex-row sm:justify-end',
63      className
64    )}
65    {...props}
66  />
67)
68// … truncated