49 lines
1.8 KiB
TypeScript
49 lines
1.8 KiB
TypeScript
import { NavLink, Outlet } from 'react-router-dom'
|
|
import { User, Building, Key, Sliders, Bell, Palette, Shield, Plug, Clock } from 'lucide-react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
const navItems = [
|
|
{ label: 'Profile', href: '/settings/profile', icon: User },
|
|
{ label: 'Organization', href: '/settings/organization', icon: Building },
|
|
{ label: 'API Keys', href: '/settings/api-keys', icon: Key },
|
|
{ label: 'Exploration Defaults', href: '/settings/defaults', icon: Sliders },
|
|
{ label: 'Schedules', href: '/settings/schedules', icon: Clock },
|
|
{ label: 'Notifications', href: '/settings/notifications', icon: Bell },
|
|
{ label: 'Integrations', href: '/settings/integrations', icon: Plug },
|
|
{ label: 'Appearance', href: '/settings/appearance', icon: Palette },
|
|
{ label: 'License', href: '/settings/license', icon: Shield },
|
|
]
|
|
|
|
export function SettingsLayout() {
|
|
return (
|
|
<div className="flex gap-8">
|
|
<nav className="w-48 shrink-0 space-y-1">
|
|
<h2 className="text-xs font-semibold text-muted-foreground uppercase tracking-wide px-3 mb-3">
|
|
Settings
|
|
</h2>
|
|
{navItems.map(item => (
|
|
<NavLink
|
|
key={item.href}
|
|
to={item.href}
|
|
className={({ isActive }) =>
|
|
cn(
|
|
'flex items-center gap-2.5 px-3 py-2 rounded-md text-sm transition-colors',
|
|
isActive
|
|
? 'bg-accent text-accent-foreground font-medium'
|
|
: 'text-muted-foreground hover:text-foreground hover:bg-accent/50'
|
|
)
|
|
}
|
|
>
|
|
<item.icon className="h-4 w-4 shrink-0" />
|
|
{item.label}
|
|
</NavLink>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="flex-1 min-w-0">
|
|
<Outlet />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|