59 lines
1.4 KiB
TypeScript
59 lines
1.4 KiB
TypeScript
'use client'
|
|
|
|
import { cn } from '@/utils/cn'
|
|
import { Folder, Home, Info, Rss, Tags } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import { usePathname } from 'next/navigation'
|
|
|
|
type NavItem = {
|
|
href: string
|
|
label: string
|
|
icon: React.ReactNode
|
|
target?: string
|
|
rel?: string
|
|
}
|
|
|
|
const navItems: NavItem[] = [
|
|
{ href: '/', label: 'Home', icon: <Home className="w-4 h-4" /> },
|
|
{ href: '/categories', label: 'Categories', icon: <Folder className="w-4 h-4" /> },
|
|
{ href: '/about', label: 'About', icon: <Info className="w-4 h-4" /> },
|
|
{ href: '/tags', label: 'Tags', icon: <Tags className="w-4 h-4" /> },
|
|
{
|
|
href: '/feed.xml',
|
|
label: 'RSS Feed',
|
|
icon: <Rss className="w-4 h-4" />,
|
|
target: '_blank',
|
|
rel: 'noopener noreferrer',
|
|
},
|
|
]
|
|
|
|
export function NavLinks() {
|
|
const pathname = usePathname()
|
|
|
|
const isActive = (href: string) => {
|
|
if (href === '/') {
|
|
return pathname === href
|
|
}
|
|
return pathname?.startsWith(href)
|
|
}
|
|
|
|
return navItems.map((item) => (
|
|
<li
|
|
key={item.href}
|
|
className={cn(
|
|
'transition-colors rounded-md',
|
|
isActive(item.href) ? 'text-fg bg-fg/25' : 'text-fg-dim hover:text-fg hover:bg-fg/10',
|
|
)}
|
|
>
|
|
<Link
|
|
href={item.href}
|
|
className="flex items-center gap-2 px-2 py-1"
|
|
target={item.target}
|
|
rel={item.rel}
|
|
>
|
|
{item.icon}
|
|
{item.label}
|
|
</Link>
|
|
</li>
|
|
))
|
|
}
|