init feature

2025-12-24 15:38:36 +03:00
parent 0fdc20e750
commit fcd4199cbd
15 changed files with 994 additions and 2 deletions
--- a/frontend/src/components/ConfirmModal.tsx
+++ b/frontend/src/components/ConfirmModal.tsx
@@ -0,0 +1,82 @@
+import { X, AlertTriangle } from 'lucide-react';
+
+interface ConfirmModalProps {
+  title: string;
+  message: string;
+  confirmText?: string;
+  cancelText?: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  variant?: 'danger' | 'warning' | 'info';
+}
+
+export default function ConfirmModal({
+  title,
+  message,
+  confirmText = 'Подтвердить',
+  cancelText = 'Отмена',
+  onConfirm,
+  onCancel,
+  variant = 'danger',
+}: ConfirmModalProps) {
+  const getVariantStyles = () => {
+    switch (variant) {
+      case 'danger':
+        return {
+          icon: 'bg-red-100 text-red-600',
+          confirmButton: 'bg-gradient-to-r from-red-500 to-red-600 hover:shadow-lg',
+        };
+      case 'warning':
+        return {
+          icon: 'bg-yellow-100 text-yellow-600',
+          confirmButton: 'bg-gradient-to-r from-yellow-500 to-yellow-600 hover:shadow-lg',
+        };
+      case 'info':
+        return {
+          icon: 'bg-blue-100 text-blue-600',
+          confirmButton: 'bg-gradient-to-r from-blue-500 to-blue-600 hover:shadow-lg',
+        };
+    }
+  };
+
+  const styles = getVariantStyles();
+
+  return (
+    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-[60] p-4">
+      <div className="bg-white rounded-3xl shadow-2xl max-w-md w-full overflow-hidden animate-scale-in">
+        <div className="p-6">
+          <div className="flex items-start gap-4">
+            <div className={`p-3 rounded-2xl ${styles.icon}`}>
+              <AlertTriangle className="w-6 h-6" />
+            </div>
+            <div className="flex-1">
+              <h3 className="text-xl font-bold text-gray-900 mb-2">{title}</h3>
+              <p className="text-gray-600">{message}</p>
+            </div>
+            <button
+              onClick={onCancel}
+              className="p-2 hover:bg-gray-100 rounded-xl transition-all"
+            >
+              <X className="w-5 h-5 text-gray-500" />
+            </button>
+          </div>
+        </div>
+
+        <div className="px-6 pb-6 flex gap-3">
+          <button
+            onClick={onCancel}
+            className="flex-1 px-6 py-3 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-2xl transition-all font-semibold"
+          >
+            {cancelText}
+          </button>
+          <button
+            onClick={onConfirm}
+            className={`flex-1 px-6 py-3 text-white rounded-2xl transition-all font-semibold ${styles.confirmButton}`}
+          >
+            {confirmText}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}