Denis Urs Rudolph
56 lines
1.7 KiB
TypeScript
56 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import { useAuth } from '@/lib/auth-context';
|
|
|
|
export function Navigation() {
|
|
const { user, logout, isAuthenticated } = useAuth();
|
|
|
|
return (
|
|
<nav className="bg-white shadow-sm border-b">
|
|
<div className="max-w-7xl mx-auto px-4">
|
|
<div className="flex justify-between items-center h-16">
|
|
<div className="flex items-center gap-8">
|
|
<a href="/" className="text-xl font-bold text-blue-600">
|
|
RacePlanner
|
|
</a>
|
|
<a href="/events" className="text-gray-700 hover:text-blue-600">
|
|
Events
|
|
</a>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4">
|
|
{isAuthenticated ? (
|
|
<>
|
|
<a href="/dashboard" className="text-gray-700 hover:text-blue-600">
|
|
Dashboard
|
|
</a>
|
|
<a href="/registrations" className="text-gray-700 hover:text-blue-600">
|
|
My Registrations
|
|
</a>
|
|
<span className="text-sm text-gray-500">{user?.name}</span>
|
|
<button
|
|
onClick={logout}
|
|
className="px-4 py-2 text-sm text-red-600 hover:text-red-700"
|
|
>
|
|
Logout
|
|
</button>
|
|
</>
|
|
) : (
|
|
<>
|
|
<a href="/login" className="text-gray-700 hover:text-blue-600">
|
|
Login
|
|
</a>
|
|
<a
|
|
href="/register"
|
|
className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-sm"
|
|
>
|
|
Register
|
|
</a>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
} |