Spaces:
Sleeping
Sleeping
File size: 3,035 Bytes
d97b8f9 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | import React from 'react';
import { X, AlertCircle } from 'lucide-react';
import { Button } from '@/components/ui/button';
interface CustomConfirmDialogProps {
isOpen: boolean;
onClose: () => void;
onConfirm: () => void;
title: string;
description?: string | React.ReactNode;
confirmText?: string;
cancelText?: string;
variant?: 'destructive' | 'default' | 'outline' | 'secondary' | 'ghost' | 'link';
isLoading?: boolean;
}
const CustomConfirmDialog: React.FC<CustomConfirmDialogProps> = ({
isOpen,
onClose,
onConfirm,
title,
description,
confirmText = 'Confirm',
cancelText = 'Cancel',
variant = 'destructive',
isLoading = false,
}) => {
if (!isOpen) return null;
const handleOverlayClick = (e: React.MouseEvent) => {
// Only allow closing if not in loading state
if (!isLoading && e.target === e.currentTarget) {
onClose();
}
};
return (
<div className="fixed inset-0 z-[999] flex items-center justify-center overflow-y-auto p-4">
{/* Overlay */}
<div
className="fixed inset-0 bg-black/80 backdrop-blur-sm"
onClick={handleOverlayClick}
/>
{/* Modal Content */}
<div className="relative z-[1000] w-full max-w-md rounded-lg border bg-background p-6 shadow-lg">
<div className="flex gap-4 items-start mb-4">
{variant === 'destructive' && (
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-destructive/20 text-destructive">
<AlertCircle className="h-5 w-5" />
</div>
)}
<div className="flex-1">
<h2 className="text-lg font-semibold">{title}</h2>
{description && (
typeof description === 'string'
? <p className="text-sm text-muted-foreground mt-1">{description}</p>
: <div className="mt-2">{description}</div>
)}
</div>
</div>
<div className="flex justify-end space-x-2 mt-6">
<Button
variant="outline"
onClick={onClose}
disabled={isLoading}
>
{cancelText}
</Button>
<Button
variant={variant}
onClick={onConfirm}
disabled={isLoading}
>
{isLoading ? 'Processing...' : confirmText}
</Button>
</div>
{/* Close button */}
{!isLoading && (
<button
onClick={onClose}
className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
>
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
</button>
)}
</div>
</div>
);
};
export default CustomConfirmDialog; |