50 lines
1.9 KiB
TypeScript
50 lines
1.9 KiB
TypeScript
|
import { useState } from "react";
|
||
|
|
import { Mail, Lock, Eye, EyeOff } from "lucide-react";
|
||
|
|
|
||
|
|
export default function Login() {
|
||
|
|
const [email, setEmail] = useState("");
|
||
|
|
const [password, setPassword] = useState("");
|
||
|
|
const [showPassword, setShowPassword] = useState(false);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen bg-gradient-to-b from-blue-50 to-white flex items-center justify-center px-4">
|
||
|
|
<div className="bg-white rounded-xl shadow-lg p-8 w-full max-w-md">
|
||
|
|
<h1 className="text-2xl font-bold text-center mb-6">Вход в LocalPro Finder</h1>
|
||
|
|
|
||
|
|
<div className="space-y-4">
|
||
|
|
<div>
|
||
|
|
<label className="block text-sm font-medium mb-1">Email</label>
|
||
|
|
<input
|
||
|
|
type="email"
|
||
|
|
value={email}
|
||
|
|
onChange={(e) => setEmail(e.target.value)}
|
||
|
|
placeholder="your@email.com"
|
||
|
|
className="w-full px-4 py-3 rounded-lg border focus:outline-none focus:ring-2 focus:ring-blue-300"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<label className="block text-sm font-medium mb-1">Пароль</label>
|
||
|
|
<input
|
||
|
|
type={showPassword ? "text" : "password"}
|
||
|
|
value={password}
|
||
|
|
onChange={(e) => setPassword(e.target.value)}
|
||
|
|
placeholder="••••••••"
|
||
|
|
className="w-full px-4 py-3 rounded-lg border focus:outline-none focus:ring-2 focus:ring-blue-300"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button className="w-full py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition">
|
||
|
|
Войти
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<p className="text-center text-sm opacity-60">
|
||
|
|
Нет аккаунта?{" "}
|
||
|
|
<a href="/register" className="text-blue-600 hover:underline">Зарегистрироваться</a>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|