website refactor

apps/website/components/drivers/DriverProfileTabs.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import React from 'react';
+import { LayoutDashboard, BarChart3, ShieldCheck } from 'lucide-react';
+import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+
+export type ProfileTab = 'overview' | 'stats' | 'ratings';
+
+interface DriverProfileTabsProps {
+  activeTab: ProfileTab;
+  onTabChange: (tab: ProfileTab) => void;
+}
+
+export function DriverProfileTabs({ activeTab, onTabChange }: DriverProfileTabsProps) {
+  const tabs = [
+    { id: 'overview', label: 'Overview', icon: LayoutDashboard },
+    { id: 'stats', label: 'Career Stats', icon: BarChart3 },
+    { id: 'ratings', label: 'Ratings', icon: ShieldCheck },
+  ] as const;
+
+  return (
+    <Box display="flex" alignItems="center" gap={1} borderBottom borderColor="border-charcoal-outline">
+      {tabs.map((tab) => {
+        const isActive = activeTab === tab.id;
+        const Icon = tab.icon;
+        
+        return (
+          <Box
+            as="button"
+            key={tab.id}
+            onClick={() => onTabChange(tab.id)}
+            position="relative"
+            display="flex"
+            alignItems="center"
+            gap={2}
+            px={6}
+            py={4}
+            transition
+            hoverBg="bg-white/5"
+            color={isActive ? 'text-primary-blue' : 'text-gray-500'}
+            hoverTextColor={isActive ? 'text-primary-blue' : 'text-gray-300'}
+          >
+            <Icon size={18} />
+            <Text size="sm" weight={isActive ? 'bold' : 'medium'} color="inherit">
+              {tab.label}
+            </Text>
+            
+            {isActive && (
+              <Box position="absolute" bottom="0" left="0" h="0.5" w="full" bg="bg-primary-blue" shadow="shadow-[0_0_8px_rgba(25,140,255,0.5)]" />
+            )}
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}