Files
freelancer-match/frontend/src/pages/login.tsx
T

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>
);
}