Confirmation Dialog

1import * as React from 'react';
2import {
3  AlertDialog,
4  AlertDialogAction,
5  AlertDialogCancel,
6  AlertDialogContent,
7  AlertDialogDescription,
8  AlertDialogFooter,
9  AlertDialogHeader,
10  AlertDialogTitle,
11  AlertDialogTrigger,
12} from '@/components/ui/alert-dialog';
13import { buttonVariants } from '@/components/ui/button';
14import { cn } from '@/lib/utils/deso';
15 
16export interface ConfirmationDialogProps {
17  trigger: React.ReactNode;
18  title: React.ReactNode;
19  description?: React.ReactNode;
20  onConfirm: () => void;
21  onCancel?: () => void;
22  variant?: 'default' | 'success' | 'destructive';
23  confirmText?: string;
24  cancelText?: string;
25  open?: boolean;
26  onOpenChange?: (open: boolean) => void;
27}
28 
29export function ConfirmationDialog({
30  trigger,
31  title,
32  description,
33  onConfirm,
34  onCancel,
35  variant = 'default',
36  confirmText = 'Confirm',
37  cancelText = 'Cancel',
38  open,
39  onOpenChange,
40}: ConfirmationDialogProps) {
41  const confirmButtonVariant = variant === 'default' ? 'default' : variant;
42 
43  return (
44    <AlertDialog open={open} onOpenChange={onOpenChange}>
45      <AlertDialogTrigger asChild>{trigger}</AlertDialogTrigger>
46      <AlertDialogContent className="border border-border">
47        <AlertDialogHeader>
48          <AlertDialogTitle>{title}</AlertDialogTitle>
49          {description && (
50            <AlertDialogDescription>{description}</AlertDialogDescription>
51          )}
52        </AlertDialogHeader>
53        <AlertDialogFooter>
54          <AlertDialogCancel onClick={onCancel}>{cancelText}</AlertDialogCancel>
55          <AlertDialogAction
56            onClick={onConfirm}
57            className={cn(buttonVariants({ variant: confirmButtonVariant }))}
58          >
59            {confirmText}
60          </AlertDialogAction>
61        </AlertDialogFooter>
62      </AlertDialogContent>
63    </AlertDialog>
64  );
65}