website refactor

apps/website/ui/BorderTabs.tsx

@@ -1,64 +1,63 @@
-
-
-import { Badge } from './Badge';
+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 {
   id: string;
   label: string;
-  count?: number;
-  countVariant?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+  icon?: React.ReactNode;
 }
 
 interface BorderTabsProps {
   tabs: Tab[];
   activeTab: string;
   onTabChange: (tabId: string) => void;
+  className?: string;
 }
 
-export function BorderTabs({ tabs, activeTab, onTabChange }: BorderTabsProps) {
+export function BorderTabs({ tabs, activeTab, onTabChange, className = '' }: BorderTabsProps) {
   return (
-    <Box borderBottom borderColor="border-charcoal-outline">
-      <Box display="flex" gap={4}>
+    <Box borderBottom borderColor="border-border-gray/50" className={className}>
+      <Stack direction="row" gap={8}>
         {tabs.map((tab) => {
           const isActive = activeTab === tab.id;
           return (
-            <Box
+            <Surface
               key={tab.id}
               as="button"
-              type="button"
               onClick={() => onTabChange(tab.id)}
-              pb={3}
+              variant="ghost"
               px={1}
-              cursor="pointer"
-              transition
-              borderBottom={isActive}
+              py={4}
+              position="relative"
               borderColor={isActive ? 'border-primary-blue' : ''}
-              style={{ 
-                borderBottomWidth: isActive ? '2px' : '0',
-                marginBottom: '-1px'
-              }}
+              borderBottom={isActive}
+              borderWidth={isActive ? '2px' : '0'}
+              mb="-1px"
+              transition="all 0.2s"
+              group
             >
-              <Box display="flex" alignItems="center" gap={2}>
+              <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'}
-                  className={!isActive ? 'hover:text-white' : ''}
+                  color={isActive ? 'text-primary-blue' : 'text-gray-400'} 
+                  groupHoverTextColor={!isActive ? 'white' : undefined}
                 >
                   {tab.label}
                 </Text>
-                {tab.count !== undefined && tab.count > 0 && (
-                  <Badge variant={tab.countVariant || 'warning'}>
-                    {tab.count}
-                  </Badge>
-                )}
-              </Box>
-            </Box>
+              </Stack>
+            </Surface>
           );
         })}
-      </Box>
+      </Stack>
     </Box>
   );
 }