extract components from website

apps/website/components/ui/TabContent.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+interface TabContentProps {
+  activeTab: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export default function TabContent({ activeTab, children, className = '' }: TabContentProps) {
+  return (
+    <div className={className}>
+      {children}
+    </div>
+  );
+}

apps/website/components/ui/TabNavigation.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+interface Tab {
+  id: string;
+  label: string;
+  icon?: React.ComponentType<{ className?: string }>;
+}
+
+interface TabNavigationProps {
+  tabs: Tab[];
+  activeTab: string;
+  onTabChange: (tabId: string) => void;
+  className?: string;
+}
+
+export default function TabNavigation({ tabs, activeTab, onTabChange, className = '' }: TabNavigationProps) {
+  return (
+    <div className={`flex items-center gap-1 p-1.5 rounded-xl bg-iron-gray/50 border border-charcoal-outline w-fit relative z-10 ${className}`}>
+      {tabs.map((tab) => {
+        const Icon = tab.icon;
+        return (
+          <button
+            key={tab.id}
+            type="button"
+            onClick={() => onTabChange(tab.id)}
+            className={`flex items-center gap-2 px-5 py-2.5 rounded-lg text-sm font-medium transition-all cursor-pointer select-none ${
+              activeTab === tab.id
+                ? 'bg-primary-blue text-white shadow-lg shadow-primary-blue/25'
+                : 'text-gray-400 hover:text-white hover:bg-iron-gray/80'
+            }`}
+          >
+            {Icon && <Icon className="w-4 h-4" />}
+            {tab.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}