71 lines
2.6 KiB
TypeScript
71 lines
2.6 KiB
TypeScript
'use client';
|
|
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
import { useState } from 'react';
|
|
|
|
export default function Header() {
|
|
const [isLoggedIn, setIsLoggedIn] = useState(false);
|
|
|
|
return (
|
|
<header className="relative w-full border-b border-white/20 bg-black/95 backdrop-blur-sm">
|
|
<div className="absolute inset-0 tech-grid opacity-20"></div>
|
|
<div className="relative mx-auto flex max-w-7xl items-center justify-between px-4 py-4 sm:px-6 lg:px-8">
|
|
{/* Logo */}
|
|
<Link href="/" className="flex items-center group">
|
|
<div className="relative">
|
|
<Image
|
|
src="/100kmphlogo.png"
|
|
alt="100kmph Logo"
|
|
width={100}
|
|
height={100}
|
|
className="rounded"
|
|
priority
|
|
/>
|
|
<div className="absolute inset-0 rounded bg-white/10 blur-md group-hover:bg-white/20 transition-all"></div>
|
|
</div>
|
|
</Link>
|
|
|
|
{/* Right side: Profile Icon and Login/Logout */}
|
|
<div className="flex items-center gap-4">
|
|
{/* Profile Icon */}
|
|
<button
|
|
onClick={() => {
|
|
// Navigate to profile page
|
|
if (isLoggedIn) {
|
|
// TODO: Navigate to profile page
|
|
}
|
|
}}
|
|
className="flex h-10 w-10 items-center justify-center rounded-lg border border-white/20 bg-black/50 text-white transition-all hover:border-white/40 hover:bg-white/10 hover:shadow-[0_0_15px_rgba(255,255,255,0.3)]"
|
|
aria-label="Profile"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
strokeWidth={1.5}
|
|
stroke="currentColor"
|
|
className="h-6 w-6"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
|
|
{/* Login/Logout Button */}
|
|
<button
|
|
onClick={() => setIsLoggedIn(!isLoggedIn)}
|
|
className="rounded-lg border border-white/30 bg-white/5 px-4 py-2 text-sm font-medium text-white transition-all hover:bg-white/10 hover:border-white/50 hover:shadow-[0_0_15px_rgba(255,255,255,0.4)] hover:text-gray-200"
|
|
>
|
|
{isLoggedIn ? 'Logout' : 'Login'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|
|
|