92 lines
3.1 KiB
TypeScript
92 lines
3.1 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
|
|
type AlphaNavProps = {
|
|
isAuthenticated?: boolean;
|
|
};
|
|
|
|
const nonHomeLinks = [
|
|
{ href: '/profile', label: 'Profile' },
|
|
{ href: '/leagues', label: 'Leagues' },
|
|
{ href: '/teams', label: 'Teams' },
|
|
{ href: '/drivers', label: 'Drivers' },
|
|
] as const;
|
|
|
|
export function AlphaNav({ isAuthenticated }: AlphaNavProps) {
|
|
const pathname = usePathname();
|
|
|
|
const navLinks = isAuthenticated
|
|
? ([{ href: '/dashboard', label: 'Dashboard' } as const, ...nonHomeLinks] as const)
|
|
: ([{ href: '/', label: 'Home' } as const, ...nonHomeLinks] as const);
|
|
|
|
const loginHref = '/auth/iracing/start?returnTo=/dashboard';
|
|
|
|
return (
|
|
<nav className="sticky top-0 z-40 bg-deep-graphite/95 backdrop-blur-md border-b border-white/5">
|
|
<div className="max-w-7xl mx-auto px-6">
|
|
<div className="flex items-center justify-between h-14">
|
|
<div className="flex items-baseline space-x-3">
|
|
<Link
|
|
href="/"
|
|
className="text-xl font-semibold text-white hover:text-primary-blue transition-colors"
|
|
>
|
|
GridPilot
|
|
</Link>
|
|
<span className="text-xs text-gray-500 font-light">ALPHA</span>
|
|
</div>
|
|
|
|
<div className="hidden md:flex items-center space-x-1">
|
|
{navLinks.map((link) => {
|
|
const isActive = pathname === link.href;
|
|
return (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
className={`
|
|
relative px-4 py-2 text-sm font-medium transition-all duration-200
|
|
${
|
|
isActive
|
|
? 'text-primary-blue'
|
|
: 'text-gray-400 hover:text-white'
|
|
}
|
|
`}
|
|
>
|
|
{link.label}
|
|
{isActive && (
|
|
<span className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary-blue rounded-full" />
|
|
)}
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
<div className="hidden md:flex items-center space-x-3">
|
|
{!isAuthenticated && (
|
|
<Link
|
|
href={loginHref}
|
|
className="inline-flex items-center justify-center px-3 py-1.5 rounded-md bg-primary-blue text-xs font-medium text-white hover:bg-primary-blue/90 transition-colors"
|
|
>
|
|
Authenticate with iRacing
|
|
</Link>
|
|
)}
|
|
{isAuthenticated && (
|
|
<form action="/auth/logout" method="POST">
|
|
<button
|
|
type="submit"
|
|
className="inline-flex items-center justify-center px-3 py-1.5 rounded-md border border-gray-600 text-xs font-medium text-gray-200 hover:bg-gray-800 transition-colors"
|
|
>
|
|
Logout
|
|
</button>
|
|
</form>
|
|
)}
|
|
</div>
|
|
|
|
<div className="md:hidden w-8" />
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
} |