react

frontend/src/components/ConfirmDialog.jsx

@@ -0,0 +1,37 @@
+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;