52 lines
2.6 KiB
TypeScript
52 lines
2.6 KiB
TypeScript
'use client';
|
||
|
||
import { useActionState } from 'react';
|
||
import { login } from '../actions';
|
||
import { Lock, ArrowRight } from 'lucide-react';
|
||
|
||
export default function LoginPage() {
|
||
const [state, formAction, pending] = useActionState(login, null);
|
||
|
||
return (
|
||
<div className="min-h-screen bg-black flex items-center justify-center p-4">
|
||
<div className="w-full max-w-md">
|
||
<div className="bg-zinc-950 border border-white/10 rounded-3xl p-8 space-y-8">
|
||
<div className="text-center space-y-2">
|
||
<div className="w-16 h-16 bg-[#1e9a83]/10 rounded-full flex items-center justify-center mx-auto mb-6">
|
||
<Lock className="w-8 h-8 text-[#1e9a83]" />
|
||
</div>
|
||
<h1 className="text-2xl font-black uppercase tracking-widest text-white">Yönetici Girişi</h1>
|
||
<p className="text-white/40 text-sm">Devam etmek için şifrenizi giriniz.</p>
|
||
</div>
|
||
|
||
<form action={formAction} className="space-y-6">
|
||
<div className="space-y-2">
|
||
<label className="text-[10px] font-bold uppercase tracking-widest text-white/40 ml-1">Şifre</label>
|
||
<input
|
||
type="password"
|
||
name="password"
|
||
required
|
||
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white placeholder:text-white/20 focus:border-[#1e9a83] focus:ring-1 focus:ring-[#1e9a83] outline-none transition-all"
|
||
placeholder="••••••••"
|
||
/>
|
||
</div>
|
||
|
||
{state?.error && (
|
||
<p className="text-red-500 text-xs font-bold text-center bg-red-500/10 py-2 rounded-lg">{state.error}</p>
|
||
)}
|
||
|
||
<button
|
||
type="submit"
|
||
disabled={pending}
|
||
className="w-full bg-[#1e9a83] hover:bg-[#157a67] text-white font-bold py-3 px-4 rounded-xl transition-colors flex items-center justify-center gap-2 disabled:opacity-50"
|
||
>
|
||
{pending ? 'Giriş Yapılıyor...' : 'Giriş Yap'}
|
||
{!pending && <ArrowRight className="w-4 h-4" />}
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|