website refactor

apps/website/ui/BorderTabs.tsx

@@ -0,0 +1,64 @@
+
+
+import { Badge } from './Badge';
+import { Box } from './Box';
+import { Text } from './Text';
+
+interface Tab {
+  id: string;
+  label: string;
+  count?: number;
+  countVariant?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+}
+
+interface BorderTabsProps {
+  tabs: Tab[];
+  activeTab: string;
+  onTabChange: (tabId: string) => void;
+}
+
+export function BorderTabs({ tabs, activeTab, onTabChange }: BorderTabsProps) {
+  return (
+    <Box borderBottom borderColor="border-charcoal-outline">
+      <Box display="flex" gap={4}>
+        {tabs.map((tab) => {
+          const isActive = activeTab === tab.id;
+          return (
+            <Box
+              key={tab.id}
+              as="button"
+              type="button"
+              onClick={() => onTabChange(tab.id)}
+              pb={3}
+              px={1}
+              cursor="pointer"
+              transition
+              borderBottom={isActive}
+              borderColor={isActive ? 'border-primary-blue' : ''}
+              style={{ 
+                borderBottomWidth: isActive ? '2px' : '0',
+                marginBottom: '-1px'
+              }}
+            >
+              <Box display="flex" alignItems="center" gap={2}>
+                <Text 
+                  size="sm" 
+                  weight="medium" 
+                  color={isActive ? 'text-primary-blue' : 'text-gray-400'}
+                  className={!isActive ? 'hover:text-white' : ''}
+                >
+                  {tab.label}
+                </Text>
+                {tab.count !== undefined && tab.count > 0 && (
+                  <Badge variant={tab.countVariant || 'warning'}>
+                    {tab.count}
+                  </Badge>
+                )}
+              </Box>
+            </Box>
+          );
+        })}
+      </Box>
+    </Box>
+  );
+}