97 lines
2.9 KiB
TypeScript
97 lines
2.9 KiB
TypeScript
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>
|
|
)
|
|
}
|