website refactor

apps/website/ui/TabNavigation.tsx

@@ -1,68 +1,46 @@
 import React from 'react';
 import { Box } from './primitives/Box';
-import { Stack } from './primitives/Stack';
-import { Surface } from './primitives/Surface';
 import { Text } from './Text';
+import { Surface } from './primitives/Surface';
 
-interface Tab {
+export interface TabNavigationOption {
   id: string;
   label: string;
   icon?: React.ReactNode;
 }
 
-interface TabNavigationProps {
-  tabs: Tab[];
-  activeTab: string;
-  onTabChange: (tabId: string) => void;
-  className?: string;
+export interface TabNavigationProps {
+  options: TabNavigationOption[];
+  activeId: string;
+  onChange: (id: string) => void;
 }
 
-export function TabNavigation({ tabs, activeTab, onTabChange, className = '' }: TabNavigationProps) {
+export const TabNavigation = ({ 
+  options, 
+  activeId, 
+  onChange 
+}: TabNavigationProps) => {
   return (
-    <Surface 
-      variant="muted" 
-      rounded="xl" 
-      p={1} 
-      display="inline-flex" 
-      zIndex={10} 
-      className={className}
-    >
-      <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'}`}
-            >
-              <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 variant="muted" rounded="xl" padding={1} display="inline-flex">
+      {options.map((option) => {
+        const isActive = option.id === activeId;
+        return (
+          <button
+            key={option.id}
+            onClick={() => onChange(option.id)}
+            className={`px-4 py-2 text-xs font-bold uppercase tracking-widest transition-all rounded-lg ${
+              isActive 
+                ? 'bg-[var(--ui-color-bg-surface)] text-[var(--ui-color-intent-primary)] shadow-sm' 
+                : 'text-[var(--ui-color-text-low)] hover:text-[var(--ui-color-text-high)]'
+            }`}
+          >
+            <Box display="flex" alignItems="center" gap={2}>
+              {option.icon}
+              {option.label}
+            </Box>
+          </button>
+        );
+      })}
     </Surface>
   );
-}
+};