mirror of
https://github.com/tiennm99/ccs.git
synced 2026-10-11 12:09:03 +00:00
kaitranntt
bfb2a06268
- Use CSS grid (grid-cols-6) for even tab distribution - Shorten tab labels to fit narrow panels - Add scrollbar-thin utility for overflow scenarios
38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
/**
|
|
* Tab Navigation Component
|
|
* Settings page tab switcher with icons
|
|
*/
|
|
|
|
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
import { Globe, Settings2, Server, KeyRound, Brain, Archive } from 'lucide-react';
|
|
import type { SettingsTab } from '../types';
|
|
|
|
interface TabNavigationProps {
|
|
activeTab: SettingsTab;
|
|
onTabChange: (tab: SettingsTab) => void;
|
|
}
|
|
|
|
const tabs = [
|
|
{ value: 'websearch' as const, label: 'Web', icon: Globe },
|
|
{ value: 'globalenv' as const, label: 'Env', icon: Settings2 },
|
|
{ value: 'thinking' as const, label: 'Think', icon: Brain },
|
|
{ value: 'proxy' as const, label: 'Proxy', icon: Server },
|
|
{ value: 'auth' as const, label: 'Auth', icon: KeyRound },
|
|
{ value: 'backups' as const, label: 'Backup', icon: Archive },
|
|
] as const;
|
|
|
|
export function TabNavigation({ activeTab, onTabChange }: TabNavigationProps) {
|
|
return (
|
|
<Tabs value={activeTab} onValueChange={(v) => onTabChange(v as SettingsTab)}>
|
|
<TabsList className="grid w-full grid-cols-6">
|
|
{tabs.map(({ value, label, icon: Icon }) => (
|
|
<TabsTrigger key={value} value={value} className="gap-1.5 px-1 text-xs">
|
|
<Icon className="h-3.5 w-3.5 shrink-0" />
|
|
<span className="truncate">{label}</span>
|
|
</TabsTrigger>
|
|
))}
|
|
</TabsList>
|
|
</Tabs>
|
|
);
|
|
}
|