website refactor

apps/website/ui/BorderTabs.tsx

@@ -1,63 +1,55 @@
 import React from 'react';
 import { Box } from './primitives/Box';
-import { Stack } from './primitives/Stack';
-import { Surface } from './primitives/Surface';
 import { Text } from './Text';
 
-interface Tab {
+export interface TabOption {
   id: string;
   label: string;
   icon?: React.ReactNode;
 }
 
-interface BorderTabsProps {
-  tabs: Tab[];
-  activeTab: string;
-  onTabChange: (tabId: string) => void;
-  className?: string;
+export interface BorderTabsProps {
+  tabs: TabOption[];
+  activeTabId: string;
+  onTabChange: (id: string) => void;
 }
 
-export function BorderTabs({ tabs, activeTab, onTabChange, className = '' }: BorderTabsProps) {
+export const BorderTabs = ({ 
+  tabs, 
+  activeTabId, 
+  onTabChange 
+}: BorderTabsProps) => {
   return (
-    <Box borderBottom borderColor="border-border-gray/50" className={className}>
-      <Stack direction="row" gap={8}>
-        {tabs.map((tab) => {
-          const isActive = activeTab === tab.id;
-          return (
-            <Surface
-              key={tab.id}
-              as="button"
-              onClick={() => onTabChange(tab.id)}
-              variant="ghost"
-              px={1}
-              py={4}
-              position="relative"
-              borderColor={isActive ? 'border-primary-blue' : ''}
-              borderBottom={isActive}
-              borderWidth={isActive ? '2px' : '0'}
-              mb="-1px"
-              transition="all 0.2s"
-              group
-            >
-              <Stack direction="row" align="center" gap={2}>
-                {tab.icon && (
-                  <Box color={isActive ? 'text-primary-blue' : 'text-gray-400'} groupHoverTextColor={!isActive ? 'white' : undefined}>
-                    {tab.icon}
-                  </Box>
-                )}
-                <Text 
-                  size="sm" 
-                  weight="medium" 
-                  color={isActive ? 'text-primary-blue' : 'text-gray-400'} 
-                  groupHoverTextColor={!isActive ? 'white' : undefined}
-                >
-                  {tab.label}
-                </Text>
-              </Stack>
-            </Surface>
-          );
-        })}
-      </Stack>
+    <Box display="flex" borderBottom>
+      {tabs.map((tab) => {
+        const isActive = tab.id === activeTabId;
+        return (
+          <button
+            key={tab.id}
+            onClick={() => onTabChange(tab.id)}
+            className={`px-6 py-4 text-sm font-bold uppercase tracking-widest transition-all relative ${
+              isActive 
+                ? 'text-[var(--ui-color-intent-primary)]' 
+                : 'text-[var(--ui-color-text-low)] hover:text-[var(--ui-color-text-high)]'
+            }`}
+          >
+            <Box display="flex" alignItems="center" gap={2}>
+              {tab.icon}
+              {tab.label}
+            </Box>
+            {isActive && (
+              <Box 
+                position="absolute" 
+                bottom={0} 
+                left={0} 
+                right={0} 
+                height="2px" 
+                bg="var(--ui-color-intent-primary)" 
+              />
+            )}
+          </button>
+        );
+      })}
     </Box>
   );
-}
+};