38 lines
1.3 KiB
JavaScript
38 lines
1.3 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { FiAlertTriangle } from 'react-icons/fi';
|
|
import Modal from './Modal';
|
|
|
|
const ConfirmDialog = ({ open, title, message, confirmLabel = 'Confirm', danger = false, onConfirm, onClose }) => {
|
|
const [busy, setBusy] = useState(false);
|
|
const handleConfirm = async () => {
|
|
setBusy(true);
|
|
try { await onConfirm(); }
|
|
finally { setBusy(false); }
|
|
};
|
|
|
|
return (
|
|
<Modal open={open} onClose={onClose} title={title} size="sm">
|
|
<div className="flex items-start gap-3">
|
|
{danger && (
|
|
<div className="flex items-center justify-center w-10 h-10 rounded-full bg-red-100 flex-shrink-0">
|
|
<FiAlertTriangle className="w-5 h-5 text-red-600" />
|
|
</div>
|
|
)}
|
|
<p className="text-sm text-gray-700 flex-1 pt-1">{message}</p>
|
|
</div>
|
|
<div className="flex justify-end gap-2 pt-4 mt-4 border-t border-gray-200">
|
|
<button onClick={onClose} className="btn-secondary px-4 py-2" disabled={busy}>Cancel</button>
|
|
<button
|
|
onClick={handleConfirm}
|
|
disabled={busy}
|
|
className={danger ? 'btn-danger px-4 py-2' : 'btn-primary'}
|
|
>
|
|
{busy ? 'Working...' : confirmLabel}
|
|
</button>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default ConfirmDialog;
|