50 lines
2.1 KiB
TypeScript
50 lines
2.1 KiB
TypeScript
import Link from "next/link"
|
||
|
||
export default function ProfilePage() {
|
||
return (
|
||
<div className="max-w-md mx-auto mt-8 space-y-4">
|
||
<div className="border-b border-border pb-2">
|
||
<h1 className="text-sm font-black uppercase tracking-wide text-foreground">My Profile</h1>
|
||
</div>
|
||
|
||
<div className="bg-card border border-border rounded-lg overflow-hidden">
|
||
{/* Avatar */}
|
||
<div className="bg-gradient-to-r from-primary/30 to-primary/10 px-6 py-6 flex items-center gap-4">
|
||
<div className="size-16 bg-primary/20 rounded-full flex items-center justify-center text-2xl border-2 border-primary/30">
|
||
👤
|
||
</div>
|
||
<div>
|
||
<div className="font-bold text-foreground">Guest User</div>
|
||
<div className="text-[11px] text-muted-foreground">Not logged in</div>
|
||
<Link href="/login" className="inline-block mt-2 bg-primary text-primary-foreground text-[11px] font-bold px-3 py-1 rounded hover:opacity-90">
|
||
Login
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Menu items */}
|
||
<div className="divide-y divide-border">
|
||
{[
|
||
{ icon: "🏆", label: "My Bets", href: "/history" },
|
||
{ icon: "💰", label: "Deposit", href: "/deposit" },
|
||
{ icon: "🎁", label: "Bonus", href: "/bonus" },
|
||
{ icon: "🔔", label: "Notifications", href: "/notifications" },
|
||
{ icon: "📋", label: "Rules", href: "/rules" },
|
||
].map((item) => (
|
||
<Link
|
||
key={item.label}
|
||
href={item.href}
|
||
className="flex items-center justify-between px-4 py-3 hover:bg-muted transition-colors group"
|
||
>
|
||
<div className="flex items-center gap-3">
|
||
<span className="text-lg">{item.icon}</span>
|
||
<span className="text-[12px] font-medium text-foreground">{item.label}</span>
|
||
</div>
|
||
<span className="text-muted-foreground group-hover:text-primary transition-colors">›</span>
|
||
</Link>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
} |