56 lines
1.3 KiB
TypeScript
56 lines
1.3 KiB
TypeScript
|
"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>
|
||
|
|
);
|
||
|
|
}
|