43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
'use client'
|
|
|
|
import { cn } from '@/utils/cn'
|
|
import Link from 'next/link'
|
|
import { usePathname } from 'next/navigation'
|
|
import { ExternalLink } from '../common/ExternalLink'
|
|
import { navItems } from './navItems'
|
|
|
|
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>
|
|
))
|
|
}
|