77 lines
1.6 KiB
TypeScript
77 lines
1.6 KiB
TypeScript
import { Modal } from '../ui/modal';
|
|
import Button from '../ui/button/Button';
|
|
|
|
interface ConfirmDialogProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onConfirm: () => void;
|
|
title: string;
|
|
message: string;
|
|
confirmText?: string;
|
|
cancelText?: string;
|
|
variant?: 'danger' | 'warning' | 'info';
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
export default function ConfirmDialog({
|
|
isOpen,
|
|
onClose,
|
|
onConfirm,
|
|
title,
|
|
message,
|
|
confirmText = 'Confirm',
|
|
cancelText = 'Cancel',
|
|
variant = 'danger',
|
|
isLoading = false,
|
|
}: ConfirmDialogProps) {
|
|
const variantStyles = {
|
|
danger: {
|
|
button: 'variant="primary"',
|
|
className: '',
|
|
},
|
|
warning: {
|
|
button: 'variant="primary"',
|
|
className: '',
|
|
},
|
|
info: {
|
|
button: 'variant="primary"',
|
|
className: '',
|
|
},
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
isOpen={isOpen}
|
|
onClose={onClose}
|
|
className="max-w-md"
|
|
>
|
|
<div className="p-6">
|
|
<h2 className="text-xl font-bold mb-4 text-gray-800 dark:text-white">
|
|
{title}
|
|
</h2>
|
|
<p className="text-gray-600 dark:text-gray-400 mb-6">
|
|
{message}
|
|
</p>
|
|
|
|
<div className="flex justify-end gap-4">
|
|
<Button
|
|
variant="outline"
|
|
onClick={onClose}
|
|
disabled={isLoading}
|
|
>
|
|
{cancelText}
|
|
</Button>
|
|
<Button
|
|
variant="primary"
|
|
onClick={onConfirm}
|
|
disabled={isLoading}
|
|
>
|
|
{isLoading ? 'Processing...' : confirmText}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
}
|
|
|