44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
import React from 'react'
|
|
|
|
interface TabItem {
|
|
key: string
|
|
label: string
|
|
count?: number
|
|
icon?: string
|
|
}
|
|
|
|
interface TabNavigationProps {
|
|
items: TabItem[]
|
|
activeTab: string
|
|
onTabChange: (key: string) => void
|
|
className?: string
|
|
}
|
|
|
|
export const TabNavigation: React.FC<TabNavigationProps> = ({
|
|
items,
|
|
activeTab,
|
|
onTabChange,
|
|
className = ''
|
|
}) => {
|
|
return (
|
|
<div className={`flex space-x-4 sm:space-x-8 border-b border-gray-200 overflow-x-auto ${className}`}>
|
|
{items.map((item) => (
|
|
<button
|
|
key={item.key}
|
|
onClick={() => onTabChange(item.key)}
|
|
className={`pb-4 px-1 border-b-2 font-medium text-sm whitespace-nowrap ${
|
|
activeTab === item.key
|
|
? 'border-primary text-primary'
|
|
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
|
|
}`}
|
|
>
|
|
<span className="flex items-center gap-1">
|
|
{item.icon && <span>{item.icon}</span>}
|
|
{item.label}
|
|
{typeof item.count === 'number' && ` (${item.count})`}
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)
|
|
} |