51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
'use client'
|
|
|
|
import { cn } from '@/utils/cn'
|
|
import Link from 'next/link'
|
|
import { usePathname } from 'next/navigation'
|
|
import { ExternalLink } from '@/components/ui/ExternalLink'
|
|
import { navItems } from '@/components/layout/navItems'
|
|
|
|
type NavLinksProps = {
|
|
gitOriginUrl: string | null
|
|
}
|
|
|
|
export function NavLinks({ gitOriginUrl }: NavLinksProps) {
|
|
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.includes('{gitOriginUrl}')
|
|
? item.href.replace('{gitOriginUrl}', gitOriginUrl ?? '')
|
|
: 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>
|
|
))
|
|
}
|