89 lines
3.7 KiB
TypeScript
89 lines
3.7 KiB
TypeScript
import React from 'react';
|
|
import { X, Mail, Lock, ArrowRight } from 'lucide-react';
|
|
|
|
interface LoginModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onSwitchToSignup?: () => void;
|
|
}
|
|
|
|
export const LoginModal: React.FC<LoginModalProps> = ({ isOpen, onClose, onSwitchToSignup }) => {
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6">
|
|
{/* Backdrop */}
|
|
<div
|
|
className="absolute inset-0 bg-gray-900/60 backdrop-blur-sm animate-in fade-in duration-300"
|
|
onClick={onClose}
|
|
/>
|
|
|
|
{/* Modal Content */}
|
|
<div className="relative w-full max-w-md bg-white rounded-3xl shadow-2xl overflow-hidden animate-in zoom-in-95 duration-300">
|
|
<div className="p-8 sm:p-10">
|
|
<div className="flex justify-between items-start mb-8">
|
|
<div>
|
|
<h2 className="text-3xl font-bold text-gray-900">Đăng nhập</h2>
|
|
<p className="text-gray-500 mt-2">Chào mừng bạn quay trở lại!</p>
|
|
</div>
|
|
<button
|
|
onClick={onClose}
|
|
className="p-2 hover:bg-gray-100 rounded-full transition-colors text-gray-400 hover:text-gray-600"
|
|
>
|
|
<X className="w-6 h-6" />
|
|
</button>
|
|
</div>
|
|
|
|
<form className="space-y-6" onSubmit={(e) => e.preventDefault()}>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-semibold text-gray-700 ml-1">Email</label>
|
|
<div className="relative group">
|
|
<Mail className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 group-focus-within:text-blue-500 transition-colors" />
|
|
<input
|
|
type="email"
|
|
placeholder="name@example.com"
|
|
className="w-full pl-12 pr-4 py-4 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500 focus:bg-white outline-none transition-all"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between items-center px-1">
|
|
<label className="text-sm font-semibold text-gray-700">Mật khẩu</label>
|
|
<button className="text-xs font-bold text-blue-600 hover:text-blue-700">Quên mật khẩu?</button>
|
|
</div>
|
|
<div className="relative group">
|
|
<Lock className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 group-focus-within:text-blue-500 transition-colors" />
|
|
<input
|
|
type="password"
|
|
placeholder="••••••••"
|
|
className="w-full pl-12 pr-4 py-4 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500 focus:bg-white outline-none transition-all"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
className="w-full flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 rounded-2xl shadow-lg shadow-blue-200 transition-all active:scale-[0.98]"
|
|
>
|
|
Đăng nhập
|
|
<ArrowRight className="w-5 h-5" />
|
|
</button>
|
|
</form>
|
|
|
|
<div className="mt-10 pt-8 border-t border-gray-100 text-center">
|
|
<p className="text-gray-500">
|
|
Chưa có tài khoản?{' '}
|
|
<button
|
|
onClick={() => { onClose(); onSwitchToSignup?.(); }}
|
|
className="font-bold text-blue-600 hover:underline"
|
|
>
|
|
Tạo tài khoản ngay
|
|
</button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}; |