website refactor

apps/website/ui/TabNavigation.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { Box } from './primitives/Box';
+import { Stack } from './primitives/Stack';
+import { Surface } from './primitives/Surface';
 import { Text } from './Text';
-import { Icon } from './Icon';
-import { LucideIcon } from 'lucide-react';
 
 interface Tab {
   id: string;
   label: string;
-  icon?: LucideIcon;
+  icon?: React.ReactNode;
 }
 
 interface TabNavigationProps {
@@ -19,51 +19,50 @@ interface TabNavigationProps {
 
 export function TabNavigation({ tabs, activeTab, onTabChange, className = '' }: TabNavigationProps) {
   return (
-    <Box 
-      display="flex" 
-      alignItems="center" 
-      gap={1} 
-      p={1.5} 
+    <Surface 
+      variant="muted" 
       rounded="xl" 
-      bg="bg-iron-gray/50" 
-      border 
-      borderColor="border-charcoal-outline" 
-      w="fit" 
-      position="relative" 
+      p={1} 
+      display="inline-flex" 
       zIndex={10} 
       className={className}
     >
-      {tabs.map((tab) => {
-        const isActive = activeTab === tab.id;
-        return (
-          <Box
-            key={tab.id}
-            as="button"
-            type="button"
-            onClick={() => onTabChange(tab.id)}
-            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'}`}
-          >
-            {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' : ''}
+      <Stack direction="row" gap={1}>
+        {tabs.map((tab) => {
+          const isActive = activeTab === tab.id;
+          return (
+            <Surface
+              key={tab.id}
+              as="button"
+              onClick={() => onTabChange(tab.id)}
+              variant={isActive ? 'default' : 'ghost'}
+              bg={isActive ? 'bg-primary-blue' : ''}
+              rounded="lg"
+              px={4}
+              py={2}
+              transition="all 0.2s"
+              group
+              className={`select-none ${isActive ? 'shadow-lg shadow-primary-blue/25' : 'hover:bg-iron-gray/80'}`}
             >
-              {tab.label}
-            </Text>
-          </Box>
-        );
-      })}
-    </Box>
+              <Stack direction="row" align="center" gap={2}>
+                {tab.icon && (
+                  <Box color={isActive ? 'text-white' : 'text-gray-400'} groupHoverTextColor={!isActive ? 'white' : undefined}>
+                    {tab.icon}
+                  </Box>
+                )}
+                <Text 
+                  size="sm" 
+                  weight="medium" 
+                  color={isActive ? 'text-white' : 'text-gray-400'} 
+                  groupHoverTextColor={!isActive ? 'white' : undefined}
+                >
+                  {tab.label}
+                </Text>
+              </Stack>
+            </Surface>
+          );
+        })}
+      </Stack>
+    </Surface>
   );
 }