44 lines
1.0 KiB
TypeScript
44 lines
1.0 KiB
TypeScript
|
"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>
|
||
|
|
);
|
||
|
|
}
|