大改变

components/TabNavigation.tsx

@@ -1,14 +1,14 @@
 "use client";
 
-import { Tabs, Tab } from "@heroui/react";
+import { useState } from "react";
 
-interface TabItem {
+interface Tab {
   id: string;
   label: string;
 }
 
 interface TabNavigationProps {
-  tabs: TabItem[];
+  tabs: Tab[];
   defaultActiveId?: string;
   onTabChange?: (tabId: string) => void;
 }
@@ -18,26 +18,38 @@ export default function TabNavigation({
   defaultActiveId,
   onTabChange,
 }: TabNavigationProps) {
-  const handleSelectionChange = (key: React.Key) => {
-    onTabChange?.(key.toString());
+  const [activeTab, setActiveTab] = useState(defaultActiveId || tabs[0]?.id);
+
+  const handleTabClick = (tabId: string) => {
+    setActiveTab(tabId);
+    onTabChange?.(tabId);
   };
 
   return (
-    <Tabs
-      selectedKey={defaultActiveId || tabs[0]?.id}
-      onSelectionChange={handleSelectionChange}
-      variant="underlined"
-      classNames={{
-        base: "w-auto",
-        tabList: "gap-8 w-auto p-0",
-        cursor: "bg-text-primary dark:bg-white",
-        tab: "px-0 h-auto",
-        tabContent: "text-sm font-bold text-text-tertiary dark:text-gray-400 group-data-[selected=true]:text-text-primary dark:group-data-[selected=true]:text-white",
-      }}
-    >
-      {tabs.map((tab) => (
-        <Tab key={tab.id} title={tab.label} />
-      ))}
-    </Tabs>
+    <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>
   );
 }