refactor files

2026-04-12 23:36:14 +07:00
parent 20ae176992
commit 406d7039d6
45 changed files with 162 additions and 255 deletions
--- a/src/features/auth/components/AuthModal.tsx
+++ b/src/features/auth/components/AuthModal.tsx
@@ -0,0 +1,96 @@
+import { useEffect } from 'react'
+import { useAuthModalStore } from '@/store/auth-modal-store'
+import { LoginForm } from './LoginForm'
+import { RegisterForm } from './RegisterForm'
+
+export function AuthModal() {
+  const { isOpen, mode, open, close } = useAuthModalStore()
+
+  // Close on Escape key
+  useEffect(() => {
+    if (!isOpen) return
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === 'Escape') close()
+    }
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [isOpen, close])
+
+  // Prevent body scroll when open
+  useEffect(() => {
+    document.body.style.overflow = isOpen ? 'hidden' : ''
+    return () => { document.body.style.overflow = '' }
+  }, [isOpen])
+
+  if (!isOpen) return null
+
+  return (
+    <div
+      className="fixed inset-0 z-60 flex items-center justify-center p-4"
+      style={{ zIndex: 60 }}
+    >
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/50"
+        onClick={close}
+      />
+
+      {/* Card */}
+      <div className="relative bg-white rounded-2xl shadow-2xl w-full max-w-md p-6">
+        {/* Close button */}
+        <button
+          onClick={close}
+          className="absolute top-4 right-4 text-slate-400 hover:text-slate-600 transition-colors"
+          aria-label="Đóng"
+        >
+          <span className="material-symbols-outlined text-xl">close</span>
+        </button>
+
+        {/* Header */}
+        <div className="mb-6">
+          <div className="flex items-center gap-2 mb-4">
+            <span className="material-symbols-outlined text-blue-600">school</span>
+            <span className="font-bold text-slate-800">TOEIC Luyện thi</span>
+          </div>
+
+          {/* Tab toggle */}
+          <div className="flex bg-slate-100 rounded-xl p-1">
+            <button
+              onClick={() => open('login')}
+              className={`flex-1 py-2 text-sm font-semibold rounded-lg transition-all ${
+                mode === 'login'
+                  ? 'bg-white text-blue-600 shadow-sm'
+                  : 'text-slate-500 hover:text-slate-700'
+              }`}
+            >
+              Đăng nhập
+            </button>
+            <button
+              onClick={() => open('register')}
+              className={`flex-1 py-2 text-sm font-semibold rounded-lg transition-all ${
+                mode === 'register'
+                  ? 'bg-white text-blue-600 shadow-sm'
+                  : 'text-slate-500 hover:text-slate-700'
+              }`}
+            >
+              Đăng ký
+            </button>
+          </div>
+        </div>
+
+        {/* Form */}
+        {mode === 'login' ? (
+          <LoginForm
+            onSuccess={close}
+            onSwitchToRegister={() => open('register')}
+          />
+        ) : (
+          <RegisterForm
+            onSuccess={close}
+            onSwitchToLogin={() => open('login')}
+          />
+        )}
+      </div>
+    </div>
+  )
+}