39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
|
|
interface Tab {
|
|
id: string;
|
|
label: string;
|
|
icon?: React.ComponentType<{ className?: string }>;
|
|
}
|
|
|
|
interface TabNavigationProps {
|
|
tabs: Tab[];
|
|
activeTab: string;
|
|
onTabChange: (tabId: string) => void;
|
|
className?: string;
|
|
}
|
|
|
|
export function TabNavigation({ tabs, activeTab, onTabChange, className = '' }: TabNavigationProps) {
|
|
return (
|
|
<div className={`flex items-center gap-1 p-1.5 rounded-xl bg-iron-gray/50 border border-charcoal-outline w-fit relative z-10 ${className}`}>
|
|
{tabs.map((tab) => {
|
|
const Icon = tab.icon;
|
|
return (
|
|
<button
|
|
key={tab.id}
|
|
type="button"
|
|
onClick={() => onTabChange(tab.id)}
|
|
className={`flex items-center gap-2 px-5 py-2.5 rounded-lg text-sm font-medium transition-all cursor-pointer select-none ${
|
|
activeTab === tab.id
|
|
? 'bg-primary-blue text-white shadow-lg shadow-primary-blue/25'
|
|
: 'text-gray-400 hover:text-white hover:bg-iron-gray/80'
|
|
}`}
|
|
>
|
|
{Icon && <Icon className="w-4 h-4" />}
|
|
{tab.label}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
} |