46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import { Box } from './Box';
|
|
import { NavLink } from './NavLink';
|
|
import { routes } from '@/lib/routing/RouteConfig';
|
|
import { Trophy, Users, LayoutGrid, Flag, Calendar } from 'lucide-react';
|
|
|
|
interface PublicTopNavProps {
|
|
pathname: string;
|
|
}
|
|
|
|
/**
|
|
* PublicTopNav is a horizontal navigation component for public pages.
|
|
* It displays navigation links to public routes like Leagues, Drivers, Teams, etc.
|
|
*/
|
|
export function PublicTopNav({ pathname }: PublicTopNavProps) {
|
|
const navItems = [
|
|
{ label: 'Leagues', href: routes.public.leagues, icon: Trophy },
|
|
{ label: 'Drivers', href: routes.public.drivers, icon: Users },
|
|
{ label: 'Teams', href: routes.public.teams, icon: Flag },
|
|
{ label: 'Leaderboards', href: routes.public.leaderboards, icon: LayoutGrid },
|
|
{ label: 'Races', href: routes.public.races, icon: Calendar },
|
|
];
|
|
|
|
return (
|
|
<Box
|
|
as="nav"
|
|
data-testid="public-top-nav"
|
|
display="flex"
|
|
alignItems="center"
|
|
gap={4}
|
|
width="full"
|
|
>
|
|
{navItems.map((item) => (
|
|
<NavLink
|
|
key={item.href}
|
|
href={item.href}
|
|
label={item.label}
|
|
icon={item.icon}
|
|
isActive={pathname === item.href}
|
|
variant="top"
|
|
/>
|
|
))}
|
|
</Box>
|
|
);
|
|
}
|