This repository has no description
Something went wrong. Try again.
1.4 kB · 52 lines
TSX
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253'use client'
import Link from 'next/link'import { usePathname } from 'next/navigation'import clsx from 'clsx'import type { ReactNode } from 'react'
interface NavLinkProps { href: string className?: string /** Extra classes applied when the link is active */ activeClassName?: string /** Extra classes applied when the link is inactive */ inactiveClassName?: string /** Show the → arrow indicator for active state (used in the main nav) */ showArrow?: boolean children: ReactNode}
export function NavLink({ href, className, activeClassName, inactiveClassName, showArrow = false, children,}: NavLinkProps) { const pathname = usePathname() const isActive = href === '/' ? pathname === '/' : pathname === href || pathname.startsWith(href + '/')
return ( <Link href={href} className={clsx( className, isActive ? activeClassName : inactiveClassName, // Simple NavLink.astro behaviour: underline on active when no explicit activeClassName !activeClassName && !inactiveClassName && isActive ? 'underline decoration-1 underline-offset-2' : undefined, )} > {showArrow && isActive && ( <span aria-hidden="true" className="text-ink absolute top-2.5 left-1 text-[11px]"> → </span> )} {children} </Link> )}