website refactor

apps/website/ui/TabNavigation.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Box } from './Box';
+import { Surface } from './Surface';
 
 export interface TabNavigationOption {
   id: string;
@@ -8,24 +9,34 @@ export interface TabNavigationOption {
 }
 
 export interface TabNavigationProps {
-  options: TabNavigationOption[];
-  activeId: string;
-  onChange: (id: string) => void;
+  options?: TabNavigationOption[];
+  activeId?: string;
+  onChange?: (id: string) => void;
+  tabs?: TabNavigationOption[];
+  activeTab?: string;
+  onTabChange?: (id: string) => void;
 }
 
 export const TabNavigation = ({ 
   options, 
   activeId, 
-  onChange 
+  onChange,
+  tabs,
+  activeTab,
+  onTabChange
 }: TabNavigationProps) => {
+  const finalOptions = options || tabs || [];
+  const finalActiveId = activeId || activeTab || '';
+  const finalOnChange = onChange || onTabChange || (() => {});
+
   return (
     <Surface variant="muted" rounded="xl" padding={1} display="inline-flex">
-      {options.map((option) => {
-        const isActive = option.id === activeId;
+      {finalOptions.map((option) => {
+        const isActive = option.id === finalActiveId;
         return (
           <button
             key={option.id}
-            onClick={() => onChange(option.id)}
+            onClick={() => finalOnChange(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'