36 lines
1.2 KiB
TypeScript
36 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
|
|
interface TabConfig {
|
|
id: string;
|
|
name: string;
|
|
icon: React.ReactNode;
|
|
}
|
|
|
|
interface TabsNavProps {
|
|
tabs: TabConfig[];
|
|
activeTab: string;
|
|
onChange: (id: string) => void;
|
|
}
|
|
|
|
const TabsNav: React.FC<TabsNavProps> = ({ tabs, activeTab, onChange }) => (
|
|
<nav className="flex lg:flex-col gap-2 overflow-x-auto lg:overflow-x-visible pb-2 lg:pb-0 scrollbar-hide">
|
|
{tabs.map((tab) => (
|
|
<button
|
|
key={tab.id}
|
|
type="button"
|
|
onClick={() => onChange(tab.id)}
|
|
className={`flex items-center px-4 py-3 text-sm font-medium rounded-lg transition-colors whitespace-nowrap flex-shrink-0 lg:w-full ${
|
|
activeTab === tab.id
|
|
? 'bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300'
|
|
: 'text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-700/50'
|
|
}`}
|
|
>
|
|
<span className="mr-2 lg:mr-3 flex-shrink-0">{tab.icon}</span>
|
|
<span className="text-left">{tab.name}</span>
|
|
</button>
|
|
))}
|
|
</nav>
|
|
);
|
|
|
|
export type { TabConfig };
|
|
export default TabsNav;
|