53 lines
1.9 KiB
TypeScript
53 lines
1.9 KiB
TypeScript
'use client'
|
|
import Link from 'next/link'
|
|
import { usePathname } from 'next/navigation'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
const TABS = [
|
|
{ href: '/dashboard', label: 'Dashboard', icon: '◈' },
|
|
{ href: '/listings', label: 'Listings', icon: '≡' },
|
|
{ href: '/keywords', label: 'Targets', icon: '⌖' },
|
|
{ href: '/sites', label: 'Sites', icon: '⬡' },
|
|
{ href: '/settings', label: 'Settings', icon: '⚙' },
|
|
{ href: '/ai-log', label: 'AI Log', icon: '◎' },
|
|
]
|
|
|
|
export default function Nav() {
|
|
const pathname = usePathname()
|
|
return (
|
|
<nav className="glass sticky top-[56px] z-30">
|
|
<div className="absolute bottom-0 inset-x-0 h-px bg-gradient-to-r from-transparent via-g-border to-transparent" />
|
|
<div className="flex gap-0.5 px-6 overflow-x-auto scrollbar-none">
|
|
{TABS.map((tab) => {
|
|
const active = pathname === tab.href || pathname.startsWith(tab.href + '/')
|
|
return (
|
|
<Link
|
|
key={tab.href}
|
|
href={tab.href}
|
|
className={cn(
|
|
'relative flex items-center gap-1.5 px-4 py-3 text-[13px] font-semibold whitespace-nowrap transition-all duration-200',
|
|
active
|
|
? 'text-g-green'
|
|
: 'text-g-faint hover:text-g-muted'
|
|
)}
|
|
>
|
|
<span className={cn(
|
|
'text-[11px] transition-all duration-200',
|
|
active ? 'text-g-green opacity-100' : 'text-g-faint opacity-50'
|
|
)}>
|
|
{tab.icon}
|
|
</span>
|
|
{tab.label}
|
|
|
|
{/* Active indicator — glowing underline */}
|
|
{active && (
|
|
<span className="absolute bottom-0 inset-x-2 h-[2px] rounded-full bg-gradient-to-r from-g-green to-g-cyan shadow-[0_0_8px_rgba(0,232,123,0.5)]" />
|
|
)}
|
|
</Link>
|
|
)
|
|
})}
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|