60 lines
2.6 KiB
TypeScript
60 lines
2.6 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import Link from "next/link"
|
|
|
|
export default function LoginPage() {
|
|
const [username, setUsername] = useState("")
|
|
const [password, setPassword] = useState("")
|
|
|
|
return (
|
|
<div className="max-w-sm mx-auto mt-8">
|
|
<div className="bg-card border border-border rounded-lg overflow-hidden">
|
|
<div className="bg-primary px-6 py-4">
|
|
<h1 className="text-base font-black text-primary-foreground uppercase tracking-wide">Login</h1>
|
|
<p className="text-[11px] text-primary-foreground/70 mt-0.5">Sign in to your Harifsport account</p>
|
|
</div>
|
|
<div className="p-6 space-y-4">
|
|
<div>
|
|
<label className="text-[11px] font-semibold text-muted-foreground uppercase block mb-1">Username</label>
|
|
<input
|
|
type="text"
|
|
value={username}
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
placeholder="Enter username"
|
|
className="w-full bg-input border border-border rounded px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary transition-colors"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="text-[11px] font-semibold text-muted-foreground uppercase block mb-1">Password</label>
|
|
<input
|
|
type="password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
placeholder="Enter password"
|
|
className="w-full bg-input border border-border rounded px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary transition-colors"
|
|
/>
|
|
</div>
|
|
<div className="flex items-center justify-between text-[11px]">
|
|
<label className="flex items-center gap-2 text-muted-foreground cursor-pointer">
|
|
<input type="checkbox" className="rounded" />
|
|
Remember me
|
|
</label>
|
|
<Link href="/reset-password" className="text-primary hover:underline">
|
|
Forgot password?
|
|
</Link>
|
|
</div>
|
|
<button className="w-full bg-primary text-primary-foreground font-bold py-2.5 rounded uppercase text-sm hover:opacity-90 transition-opacity">
|
|
Login
|
|
</button>
|
|
<p className="text-center text-[11px] text-muted-foreground">
|
|
Don't have an account?{" "}
|
|
<Link href="/register" className="text-primary hover:underline font-semibold">
|
|
Register now
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |