website refactor

apps/website/ui/TabNavigation.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
+import { Box } from './Box';
+import { Text } from './Text';
+import { Icon } from './Icon';
 
 interface Tab {
   id: string;
   label: string;
-  icon?: React.ComponentType<{ className?: string }>;
+  icon?: any;
 }
 
 interface TabNavigationProps {
@@ -15,25 +18,51 @@ interface TabNavigationProps {
 
 export function TabNavigation({ tabs, activeTab, onTabChange, className = '' }: TabNavigationProps) {
   return (
-    <div className={`flex items-center gap-1 p-1.5 rounded-xl bg-iron-gray/50 border border-charcoal-outline w-fit relative z-10 ${className}`}>
+    <Box 
+      display="flex" 
+      alignItems="center" 
+      gap={1} 
+      p={1.5} 
+      rounded="xl" 
+      bg="bg-iron-gray/50" 
+      border 
+      borderColor="border-charcoal-outline" 
+      w="fit" 
+      position="relative" 
+      zIndex={10} 
+      className={className}
+    >
       {tabs.map((tab) => {
-        const Icon = tab.icon;
+        const isActive = activeTab === tab.id;
         return (
-          <button
+          <Box
             key={tab.id}
+            as="button"
             type="button"
             onClick={() => onTabChange(tab.id)}
-            className={`flex items-center gap-2 px-5 py-2.5 rounded-lg text-sm font-medium transition-all cursor-pointer select-none ${
-              activeTab === tab.id
-                ? 'bg-primary-blue text-white shadow-lg shadow-primary-blue/25'
-                : 'text-gray-400 hover:text-white hover:bg-iron-gray/80'
-            }`}
+            display="flex"
+            alignItems="center"
+            gap={2}
+            px={5}
+            py={2.5}
+            rounded="lg"
+            cursor="pointer"
+            transition
+            bg={isActive ? 'bg-primary-blue' : ''}
+            className={`select-none ${isActive ? 'shadow-lg shadow-primary-blue/25' : 'hover:bg-iron-gray/80'}`}
           >
-            {Icon && <Icon className="w-4 h-4" />}
-            {tab.label}
-          </button>
+            {tab.icon && <Icon icon={tab.icon} size={4} color={isActive ? 'text-white' : 'text-gray-400'} />}
+            <Text 
+              size="sm" 
+              weight="medium" 
+              color={isActive ? 'text-white' : 'text-gray-400'}
+              className={!isActive ? 'hover:text-white' : ''}
+            >
+              {tab.label}
+            </Text>
+          </Box>
         );
       })}
-    </div>
+    </Box>
   );
-}
+}