website refactor

apps/website/ui/BorderTabs.tsx

@@ -1,21 +1,32 @@
 import { Box } from './Box';
 
 
+export interface TabOption {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  count?: number;
+}
+
 export interface BorderTabsProps {
   tabs: TabOption[];
-  activeTabId: string;
+  activeTabId?: string;
   onTabChange: (id: string) => void;
+  activeTab?: string;
 }
 
 export const BorderTabs = ({ 
   tabs, 
   activeTabId, 
-  onTabChange 
+  onTabChange,
+  activeTab
 }: BorderTabsProps) => {
+  const finalActiveTabId = activeTabId || activeTab || '';
+
   return (
     <Box display="flex" borderBottom>
       {tabs.map((tab) => {
-        const isActive = tab.id === activeTabId;
+        const isActive = tab.id === finalActiveTabId;
         return (
           <button
             key={tab.id}
@@ -29,6 +40,11 @@ export const BorderTabs = ({
             <Box display="flex" alignItems="center" gap={2}>
               {tab.icon}
               {tab.label}
+              {tab.count !== undefined && (
+                <Box as="span" px={1.5} py={0.5} rounded="full" bg="white/10" fontSize="10px">
+                  {tab.count}
+                </Box>
+              )}
             </Box>
             {isActive && (
               <Box