website refactor

apps/website/ui/PublicTopNav.tsx

@@ -0,0 +1,45 @@
+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>
+  );
+}