Add modals

2025-12-16 01:50:40 +07:00
parent 87ecd9756c
commit 574140e67d
11 changed files with 439 additions and 40 deletions
--- a/frontend/src/components/ui/ConfirmModal.tsx
+++ b/frontend/src/components/ui/ConfirmModal.tsx
@@ -0,0 +1,111 @@
+import { useEffect } from 'react'
+import { AlertTriangle, Info, Trash2, X } from 'lucide-react'
+import { clsx } from 'clsx'
+import { useConfirmStore, type ConfirmVariant } from '@/store/confirm'
+import { Button } from './Button'
+
+const icons: Record<ConfirmVariant, React.ReactNode> = {
+  danger: <Trash2 className="w-6 h-6" />,
+  warning: <AlertTriangle className="w-6 h-6" />,
+  info: <Info className="w-6 h-6" />,
+}
+
+const iconStyles: Record<ConfirmVariant, string> = {
+  danger: 'bg-red-500/20 text-red-500',
+  warning: 'bg-yellow-500/20 text-yellow-500',
+  info: 'bg-blue-500/20 text-blue-500',
+}
+
+const buttonVariants: Record<ConfirmVariant, 'danger' | 'primary' | 'secondary'> = {
+  danger: 'danger',
+  warning: 'primary',
+  info: 'primary',
+}
+
+export function ConfirmModal() {
+  const { isOpen, options, handleConfirm, handleCancel } = useConfirmStore()
+
+  // Handle escape key
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isOpen) {
+        handleCancel()
+      }
+    }
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [isOpen, handleCancel])
+
+  // Prevent body scroll when modal is open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden'
+    } else {
+      document.body.style.overflow = ''
+    }
+    return () => {
+      document.body.style.overflow = ''
+    }
+  }, [isOpen])
+
+  if (!isOpen || !options) return null
+
+  const variant = options.variant || 'warning'
+  const Icon = icons[variant]
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/70 backdrop-blur-sm animate-in fade-in duration-200"
+        onClick={handleCancel}
+      />
+
+      {/* Modal */}
+      <div className="relative bg-gray-800 rounded-xl shadow-2xl max-w-md w-full animate-in zoom-in-95 fade-in duration-200 border border-gray-700">
+        {/* Close button */}
+        <button
+          onClick={handleCancel}
+          className="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors"
+        >
+          <X className="w-5 h-5" />
+        </button>
+
+        <div className="p-6">
+          {/* Icon */}
+          <div className={clsx('w-12 h-12 rounded-full flex items-center justify-center mb-4', iconStyles[variant])}>
+            {Icon}
+          </div>
+
+          {/* Title */}
+          <h3 className="text-xl font-bold text-white mb-2">
+            {options.title}
+          </h3>
+
+          {/* Message */}
+          <p className="text-gray-400 mb-6 whitespace-pre-line">
+            {options.message}
+          </p>
+
+          {/* Actions */}
+          <div className="flex gap-3">
+            <Button
+              variant="secondary"
+              className="flex-1"
+              onClick={handleCancel}
+            >
+              {options.cancelText || 'Отмена'}
+            </Button>
+            <Button
+              variant={buttonVariants[variant]}
+              className="flex-1"
+              onClick={handleConfirm}
+            >
+              {options.confirmText || 'Подтвердить'}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}