Maas-Model-platform/frontend/components/TabNavigation.tsx

/**
 * Tab 导航组件
 * 
 * 统一的 Tab 切换样式，用于各个页面的模式/类型切换
 */
import React from 'react';
import { LucideIcon } from 'lucide-react';

export interface TabItem<T = string> {
  id: T;
  label: string;
  icon?: LucideIcon;
}

interface TabNavigationProps<T = string> {
  /** Tab 列表 */
  tabs: TabItem<T>[];
  /** 当前激活的 Tab ID */
  activeTab: T;
  /** Tab 切换回调 */
  onTabChange: (tabId: T) => void;
  /** 自定义容器类名 */
  className?: string;
}

function TabNavigation<T extends string = string>({
  tabs,
  activeTab,
  onTabChange,
  className = ''
}: TabNavigationProps<T>) {
  return (
    <div className={`flex space-x-1 p-1 bg-gray-100/50 w-fit rounded-xl border border-gray-100 ${className}`}>
      {tabs.map((tab) => {
        const Icon = tab.icon;
        return (
          <button
            key={tab.id}
            onClick={() => onTabChange(tab.id)}
            className={`flex items-center space-x-2 px-6 py-2 rounded-lg text-sm font-bold transition-all whitespace-nowrap ${
              activeTab === tab.id
                ? 'bg-white text-blue-600 shadow-sm'
                : 'text-gray-500 hover:text-gray-700'
            }`}
          >
            {Icon && <Icon className="w-4 h-4" />}
            <span>{tab.label}</span>
          </button>
        );
      })}
    </div>
  );
}

export default TabNavigation;