Alert Dialog

1'use client';
2 
3import * as React from 'react';
4import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
5import { motion } from 'motion/react';
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 
13const AlertDialogOverlay = React.forwardRef<
14  React.ComponentRef<typeof AlertDialogPrimitive.Overlay>,
15  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
16>(({ className, ...props }, ref) => (
17  <AlertDialogPrimitive.Overlay
18    ref={ref}
19    className={cn(
20      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
21      className,
22    )}
23    {...props}
24  />
25));
26AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
27 
28const AlertDialogContent = React.forwardRef<
29  React.ComponentRef<typeof AlertDialogPrimitive.Content>,
30  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
31>(({ className, children }, _ref) => {
32  const contentRef = React.useRef<HTMLDivElement>(null);
33  const [shakeKey, setShakeKey] = React.useState(0);
34 
35  React.useEffect(() => {
36    function handleOutsideClick(event: MouseEvent | TouchEvent) {
37      const node = contentRef.current;
38      const target = event.target as Node | null;
39      if (node && target && !node.contains(target)) {
40        setShakeKey((k) => k + 1);
41      }
42    }
43 
44    document.addEventListener('mousedown', handleOutsideClick);
45    document.addEventListener('touchstart', handleOutsideClick);
46 
47    return () => {
48      document.removeEventListener('mousedown', handleOutsideClick);
49      document.removeEventListener('touchstart', handleOutsideClick);
50    };
51  }, []);
52 
53  return (
54    <AlertDialogPortal>
55      <AlertDialogOverlay />
56      <AlertDialogPrimitive.Content asChild>
57        <div className='fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 sm:rounded-lg'>
58          <motion.div
59            key={shakeKey}
60            ref={contentRef}
61            animate={{ x: [0, -10, 10, -8, 8, -4, 4, 0] }}
62            transition={{ duration: 0.5, ease: 'easeInOut' }}
63            className={cn(
64              'grid gap-4 border bg-background p-6 shadow-lg',
65              className,
66            )}
67          >
68            {children}
69          </motion.div>
70// … truncated