大更新

components/product/TabNavigation.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { Tabs, Tab } from "@heroui/react";
+
+interface TabItem {
+  id: string;
+  label: string;
+}
+
+interface TabNavigationProps {
+  tabs: TabItem[];
+  defaultActiveId?: string;
+  onTabChange?: (tabId: string) => void;
+}
+
+export default function TabNavigation({
+  tabs,
+  defaultActiveId,
+  onTabChange,
+}: TabNavigationProps) {
+  const handleSelectionChange = (key: React.Key) => {
+    onTabChange?.(key.toString());
+  };
+
+  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>
+  );
+}