Added few functions to the platform

2026-02-06 11:34:16 +01:00
parent bb5c3058b1
commit ccff904464
14 changed files with 2770 additions and 74 deletions
--- a/components/AlertModal.tsx
+++ b/components/AlertModal.tsx
@@ -0,0 +1,127 @@
+'use client';
+
+interface AlertModalProps {
+  isOpen: boolean;
+  type: 'success' | 'error' | 'info' | 'warning';
+  title: string;
+  message: string;
+  onClose: () => void;
+}
+
+export default function AlertModal({
+  isOpen,
+  type,
+  title,
+  message,
+  onClose,
+}: AlertModalProps) {
+  if (!isOpen) return null;
+
+  const getStyles = () => {
+    switch (type) {
+      case 'success':
+        return {
+          bg: 'bg-green-50',
+          titleColor: 'text-green-900',
+          messageColor: 'text-green-800',
+          icon: (
+            <svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          ),
+          button: 'bg-green-600 text-white hover:bg-green-700',
+        };
+      case 'error':
+        return {
+          bg: 'bg-red-50',
+          titleColor: 'text-red-900',
+          messageColor: 'text-red-800',
+          icon: (
+            <svg className="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          ),
+          button: 'bg-red-600 text-white hover:bg-red-700',
+        };
+      case 'warning':
+        return {
+          bg: 'bg-orange-50',
+          titleColor: 'text-orange-900',
+          messageColor: 'text-orange-800',
+          icon: (
+            <svg className="w-6 h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+            </svg>
+          ),
+          button: 'bg-orange-600 text-white hover:bg-orange-700',
+        };
+      default:
+        return {
+          bg: 'bg-blue-50',
+          titleColor: 'text-blue-900',
+          messageColor: 'text-blue-800',
+          icon: (
+            <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          ),
+          button: 'bg-blue-600 text-white hover:bg-blue-700',
+        };
+    }
+  };
+
+  const styles = getStyles();
+
+  return (
+    <div 
+      className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-[60] p-4 animate-fadeIn"
+      onClick={onClose}
+    >
+      <div 
+        className="bg-white rounded-lg shadow-xl max-w-md w-full animate-slideUp border border-gray-200"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className={`border-b border-gray-200 px-6 py-5 ${styles.bg}`}>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              {styles.icon}
+              <h2 className={`text-xl font-semibold ${styles.titleColor}`}>
+                {title}
+              </h2>
+            </div>
+            <button
+              type="button"
+              onClick={onClose}
+              className="text-gray-400 hover:text-gray-600 transition-colors p-1.5 hover:bg-white/50 rounded"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="px-6 py-6">
+          <p className={`text-sm font-medium ${styles.messageColor}`}>
+            {message}
+          </p>
+        </div>
+
+        {/* Footer */}
+        <div className="border-t border-gray-200 px-6 py-4 bg-gray-50/50">
+          <div className="flex justify-end">
+            <button
+              type="button"
+              onClick={onClose}
+              className={`px-6 py-2 text-sm font-medium rounded-lg transition-colors ${styles.button}`}
+            >
+              OK
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}