56 lines
2.1 KiB
TypeScript
56 lines
2.1 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { usePathname } from 'next/navigation'
|
|
import { Settings, Sparkles, Palette, User, Database, Info, Key } from 'lucide-react'
|
|
import { cn } from '@/lib/utils'
|
|
import { useLanguage } from '@/lib/i18n'
|
|
|
|
interface SettingsSection {
|
|
id: string
|
|
label: string
|
|
icon: React.ReactNode
|
|
href: string
|
|
}
|
|
|
|
interface SettingsNavProps {
|
|
className?: string
|
|
}
|
|
|
|
export function SettingsNav({ className }: SettingsNavProps) {
|
|
const pathname = usePathname()
|
|
const { t } = useLanguage()
|
|
|
|
const sections: SettingsSection[] = [
|
|
{ id: 'general', label: t('generalSettings.title'), icon: <Settings className="h-4 w-4" />, href: '/settings/general' },
|
|
{ id: 'ai', label: t('aiSettings.title'), icon: <Sparkles className="h-4 w-4" />, href: '/settings/ai' },
|
|
{ id: 'appearance', label: t('appearance.title'), icon: <Palette className="h-4 w-4" />, href: '/settings/appearance' },
|
|
{ id: 'profile', label: t('profile.title'), icon: <User className="h-4 w-4" />, href: '/settings/profile' },
|
|
{ id: 'data', label: t('dataManagement.title'), icon: <Database className="h-4 w-4" />, href: '/settings/data' },
|
|
{ id: 'mcp', label: t('mcpSettings.title'), icon: <Key className="h-4 w-4" />, href: '/settings/mcp' },
|
|
{ id: 'about', label: t('about.title'), icon: <Info className="h-4 w-4" />, href: '/settings/about' },
|
|
]
|
|
|
|
const isActive = (href: string) => pathname === href || pathname.startsWith(href + '/')
|
|
|
|
return (
|
|
<nav className={cn('flex items-center gap-1', className)}>
|
|
{sections.map((section) => (
|
|
<Link
|
|
key={section.id}
|
|
href={section.href}
|
|
className={cn(
|
|
'flex items-center gap-2 px-3 py-3 text-sm font-medium border-b-2 transition-colors whitespace-nowrap',
|
|
isActive(section.href)
|
|
? 'border-primary text-primary'
|
|
: 'border-transparent text-muted-foreground hover:text-foreground hover:border-border'
|
|
)}
|
|
>
|
|
{section.icon}
|
|
<span>{section.label}</span>
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
)
|
|
}
|