Added screenshots

2026-10-21 10:15:04 +02:00 · 2025-11-28 10:23:59 +01:00
parent 8a85147713
commit 09677861ba
94 changed files with 25918 additions and 0 deletions
@@ -0,0 +1,82 @@
+import { useEffect } from 'react';
+import { AlertTriangle } from 'lucide-react';
+import { Card, CardContent } from './Card';
+import { Button } from './Button';
+
+interface ConfirmModalProps {
+  title: string;
+  message: string;
+  confirmText?: string;
+  cancelText?: string;
+  variant?: 'danger' | 'warning' | 'default';
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export function ConfirmModal({
+  title,
+  message,
+  confirmText = 'Confirm',
+  cancelText = 'Cancel',
+  variant = 'default',
+  onConfirm,
+  onCancel,
+}: ConfirmModalProps) {
+  // Close on Escape key
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onCancel();
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [onCancel]);
+
+  const variantStyles = {
+    danger: {
+      icon: 'text-red-400',
+      button: 'bg-red-500 hover:bg-red-600',
+    },
+    warning: {
+      icon: 'text-yellow-400',
+      button: 'bg-yellow-500 hover:bg-yellow-600',
+    },
+    default: {
+      icon: 'text-bambu-green',
+      button: 'bg-bambu-green hover:bg-bambu-green-dark',
+    },
+  };
+
+  const styles = variantStyles[variant];
+
+  return (
+    <div
+      className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"
+      onClick={onCancel}
+    >
+      <Card className="w-full max-w-md" onClick={(e: React.MouseEvent) => e.stopPropagation()}>
+        <CardContent className="p-6">
+          <div className="flex items-start gap-4">
+            <div className={`p-2 rounded-full bg-bambu-dark ${styles.icon}`}>
+              <AlertTriangle className="w-6 h-6" />
+            </div>
+            <div className="flex-1">
+              <h3 className="text-lg font-semibold text-white mb-2">{title}</h3>
+              <p className="text-bambu-gray text-sm">{message}</p>
+            </div>
+          </div>
+          <div className="flex gap-3 mt-6">
+            <Button variant="secondary" onClick={onCancel} className="flex-1">
+              {cancelText}
+            </Button>
+            <Button
+              onClick={onConfirm}
+              className={`flex-1 ${styles.button}`}
+            >
+              {confirmText}
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}