44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { usePathname } from 'next/navigation'
|
|
|
|
const TABS = [
|
|
{ href: '/manage', label: 'Libraries' },
|
|
{ href: '/manage/tags', label: 'Tags' },
|
|
{ href: '/manage/users', label: 'Users' },
|
|
]
|
|
|
|
export default function ManageSubNav() {
|
|
const pathname = usePathname()
|
|
|
|
return (
|
|
<nav className="flex items-center gap-1 mb-8 border-b pb-4" style={{ borderColor: 'var(--border)' }}>
|
|
{TABS.map(({ href, label }) => {
|
|
const active = pathname === href
|
|
return (
|
|
<Link
|
|
key={href}
|
|
href={href}
|
|
className="text-sm px-3 py-1.5 rounded-lg transition-colors"
|
|
style={{
|
|
color: active ? 'var(--text-primary)' : 'var(--text-secondary)',
|
|
backgroundColor: active ? 'var(--surface)' : 'transparent',
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
;(e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)'
|
|
;(e.currentTarget as HTMLElement).style.color = 'var(--text-primary)'
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
;(e.currentTarget as HTMLElement).style.backgroundColor = active ? 'var(--surface)' : 'transparent'
|
|
;(e.currentTarget as HTMLElement).style.color = active ? 'var(--text-primary)' : 'var(--text-secondary)'
|
|
}}
|
|
>
|
|
{label}
|
|
</Link>
|
|
)
|
|
})}
|
|
</nav>
|
|
)
|
|
}
|