Add confirmation modal for card removal in collection

2025-11-21 15:25:33 +01:00
parent 6d8e7b3224
commit b3fc8079c6
6 changed files with 214 additions and 902 deletions
--- a/src/components/ConfirmModal.tsx
+++ b/src/components/ConfirmModal.tsx
@@ -0,0 +1,105 @@
+import React from 'react';
+import { AlertCircle, CheckCircle, Trash2, AlertTriangle } from 'lucide-react';
+import Modal from './Modal';
+
+interface ConfirmModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title: string;
+  message: string;
+  confirmText?: string;
+  cancelText?: string;
+  variant?: 'danger' | 'warning' | 'info' | 'success';
+  isLoading?: boolean;
+}
+
+export default function ConfirmModal({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  message,
+  confirmText = 'Confirm',
+  cancelText = 'Cancel',
+  variant = 'danger',
+  isLoading = false,
+}: ConfirmModalProps) {
+  const handleConfirm = () => {
+    onConfirm();
+    if (!isLoading) {
+      onClose();
+    }
+  };
+
+  const variantConfig = {
+    danger: {
+      icon: Trash2,
+      iconColor: 'text-red-500',
+      iconBg: 'bg-red-500/10',
+      buttonColor: 'bg-red-600 hover:bg-red-700',
+    },
+    warning: {
+      icon: AlertTriangle,
+      iconColor: 'text-yellow-500',
+      iconBg: 'bg-yellow-500/10',
+      buttonColor: 'bg-yellow-600 hover:bg-yellow-700',
+    },
+    info: {
+      icon: AlertCircle,
+      iconColor: 'text-blue-500',
+      iconBg: 'bg-blue-500/10',
+      buttonColor: 'bg-blue-600 hover:bg-blue-700',
+    },
+    success: {
+      icon: CheckCircle,
+      iconColor: 'text-green-500',
+      iconBg: 'bg-green-500/10',
+      buttonColor: 'bg-green-600 hover:bg-green-700',
+    },
+  };
+
+  const config = variantConfig[variant];
+  const Icon = config.icon;
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} size="sm" showCloseButton={false}>
+      <div className="p-6">
+        {/* Icon */}
+        <div className="flex items-center justify-center mb-4">
+          <div className={`${config.iconBg} p-3 rounded-full`}>
+            <Icon className={config.iconColor} size={32} />
+          </div>
+        </div>
+
+        {/* Title */}
+        <h2 className="text-xl font-bold text-white text-center mb-2">
+          {title}
+        </h2>
+
+        {/* Message */}
+        <p className="text-gray-400 text-center mb-6">
+          {message}
+        </p>
+
+        {/* Buttons */}
+        <div className="flex gap-3">
+          <button
+            onClick={onClose}
+            disabled={isLoading}
+            className="flex-1 px-4 py-2 bg-gray-700 hover:bg-gray-600 disabled:bg-gray-600 disabled:cursor-not-allowed text-white rounded-lg transition-colors"
+          >
+            {cancelText}
+          </button>
+          <button
+            onClick={handleConfirm}
+            disabled={isLoading}
+            className={`flex-1 px-4 py-2 ${config.buttonColor} disabled:bg-gray-600 disabled:cursor-not-allowed text-white rounded-lg transition-colors`}
+          >
+            {isLoading ? 'Loading...' : confirmText}
+          </button>
+        </div>
+      </div>
+    </Modal>
+  );
+}