36 lines
892 B
TypeScript
36 lines
892 B
TypeScript
// @/utils/NavigationTabs.tsx
|
|
import React from 'react';
|
|
|
|
interface NavigationTabsProps {
|
|
tabs: string[];
|
|
activeTab: string;
|
|
onTabChange: (tab: string) => void;
|
|
className?: string;
|
|
}
|
|
|
|
export default function NavigationTabs({
|
|
tabs,
|
|
activeTab,
|
|
onTabChange,
|
|
className = '',
|
|
}: NavigationTabsProps) {
|
|
return (
|
|
<div
|
|
className={`flex items-center gap-8 border-b border-slate-800 text-sm font-semibold overflow-x-auto no-scrollbar ${className}`}
|
|
>
|
|
{tabs.map((tab) => (
|
|
<button
|
|
key={tab}
|
|
onClick={() => onTabChange(tab)}
|
|
className={`pb-3 relative transition-colors whitespace-nowrap ${
|
|
activeTab === tab
|
|
? 'text-teal-400 border-b-2 border-teal-400 font-bold'
|
|
: 'text-slate-400 hover:text-slate-200'
|
|
}`}
|
|
>
|
|
{tab}
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
} |