website refactor

apps/website/components/profile/ProfileNavTabs.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+
+export type ProfileTab = 'overview' | 'history' | 'stats' | 'leagues' | 'liveries' | 'settings';
+
+interface ProfileNavTabsProps {
+  activeTab: ProfileTab;
+  onTabChange: (tab: ProfileTab) => void;
+  tabs?: { id: ProfileTab; label: string }[];
+}
+
+const DEFAULT_TABS: { id: ProfileTab; label: string }[] = [
+  { id: 'overview', label: 'Overview' },
+  { id: 'history', label: 'History' },
+  { id: 'stats', label: 'Stats' },
+  { id: 'leagues', label: 'Leagues' },
+  { id: 'liveries', label: 'Liveries' },
+  { id: 'settings', label: 'Settings' },
+];
+
+export function ProfileNavTabs({ activeTab, onTabChange, tabs = DEFAULT_TABS }: ProfileNavTabsProps) {
+  return (
+    <nav aria-label="Profile navigation">
+      <Box borderBottom borderColor="#23272B">
+        <Stack direction="row" gap={8}>
+          {tabs.map((tab) => (
+            <Box
+              key={tab.id}
+              onClick={() => onTabChange(tab.id)}
+              pb={4}
+              cursor="pointer"
+              borderBottom
+              borderColor={activeTab === tab.id ? '#198CFF' : 'transparent'}
+              color={activeTab === tab.id ? '#198CFF' : '#9ca3af'}
+              transition
+              fontSize="0.875rem"
+              fontWeight={activeTab === tab.id ? '600' : '400'}
+              mb="-1px"
+              position="relative"
+              className="group"
+            >
+              <Text capitalize>{tab.label}</Text>
+              {activeTab === tab.id && (
+                <Box
+                  position="absolute"
+                  bottom={0}
+                  left={0}
+                  right={0}
+                  height="2px"
+                  backgroundColor="#198CFF"
+                  boxShadow="0 0 8px rgba(25, 140, 255, 0.5)"
+                />
+              )}
+            </Box>
+          ))}
+        </Stack>
+      </Box>
+    </nav>
+  );
+}