69 lines
1.8 KiB
TypeScript
69 lines
1.8 KiB
TypeScript
'use client'
|
|
|
|
import { cn } from '@/utils/cn'
|
|
import { Folder, GitBranch, Home, Info, Rss, Tags } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import { usePathname } from 'next/navigation'
|
|
import { ExternalLink } from '../common/ExternalLink'
|
|
|
|
type NavItem = {
|
|
href: string
|
|
label: string
|
|
icon: React.ReactNode
|
|
isExternal?: boolean
|
|
}
|
|
|
|
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" />,
|
|
isExternal: true,
|
|
},
|
|
{
|
|
href: 'https://git.hangerthem.com/hangerthem/blog.hangerthem.com',
|
|
label: 'Source Code',
|
|
icon: <GitBranch className="w-4 h-4" />,
|
|
isExternal: true,
|
|
},
|
|
]
|
|
|
|
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',
|
|
)}
|
|
>
|
|
{item.isExternal ? (
|
|
<ExternalLink
|
|
href={item.href}
|
|
className="flex items-center gap-2 px-2 py-1 hover:no-underline focus:no-underline"
|
|
>
|
|
{item.icon}
|
|
{item.label}
|
|
</ExternalLink>
|
|
) : (
|
|
<Link href={item.href} className="flex items-center gap-2 px-2 py-1">
|
|
{item.icon}
|
|
{item.label}
|
|
</Link>
|
|
)}
|
|
</li>
|
|
))
|
|
}
|