44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
'use client';
|
|
|
|
interface Tab {
|
|
id: string;
|
|
label: string;
|
|
icon: string;
|
|
}
|
|
|
|
interface TabNavigationProps {
|
|
tabs: Tab[];
|
|
activeTab: string;
|
|
onTabChange: (tabId: string) => void;
|
|
className?: string;
|
|
}
|
|
|
|
export default function TabNavigation({
|
|
tabs,
|
|
activeTab,
|
|
onTabChange,
|
|
className = ''
|
|
}: TabNavigationProps) {
|
|
return (
|
|
<div className={`border-b theme-border ${className}`}>
|
|
<nav className="-mb-px flex space-x-8">
|
|
{tabs.map((tab) => (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => onTabChange(tab.id)}
|
|
className={`
|
|
whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm transition-colors
|
|
${activeTab === tab.id
|
|
? 'border-blue-500 text-blue-600 dark:text-blue-400'
|
|
: 'border-transparent theme-text hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600'
|
|
}
|
|
`}
|
|
>
|
|
<span className="mr-2">{tab.icon}</span>
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
);
|
|
} |