初始化 assetx 项目，首次提交

components/TabNavigation.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { useState } from "react";
+
+interface Tab {
+  id: string;
+  label: string;
+}
+
+interface TabNavigationProps {
+  tabs: Tab[];
+  defaultActiveId?: string;
+  onTabChange?: (tabId: string) => void;
+}
+
+export default function TabNavigation({
+  tabs,
+  defaultActiveId,
+  onTabChange,
+}: TabNavigationProps) {
+  const [activeTab, setActiveTab] = useState(defaultActiveId || tabs[0]?.id);
+
+  const handleTabClick = (tabId: string) => {
+    setActiveTab(tabId);
+    onTabChange?.(tabId);
+  };
+
+  return (
+    <div className="flex items-center gap-8">
+      {tabs.map((tab) => {
+        const isActive = activeTab === tab.id;
+        return (
+          <button
+            key={tab.id}
+            onClick={() => handleTabClick(tab.id)}
+            className="flex flex-col gap-2 items-start"
+          >
+            <span
+              className={`text-sm font-bold leading-[150%] ${
+                isActive ? "text-text-primary dark:text-white" : "text-text-tertiary dark:text-gray-400"
+              }`}
+            >
+              {tab.label}
+            </span>
+            <div
+              className={`self-stretch border-t-2 -mt-[2px] ${
+                isActive ? "border-text-primary dark:border-white" : "border-transparent"
+              }`}
+            />
+          </button>
+        );
+      })}
+    </div>
+  );
+}