Janady13/llms-txt-hub / apps/web/components/layout/header-nav-link.tsx

Source identity

Field	Recorded value
Source type	GitHub source
Original record	Janady13/llms-txt-hub / apps/web/components/layout/header-nav-link.tsx
Date	Not specified in source
Repository	Janady13/llms-txt-hub
Revision	e0f4bf978d4df168369c7601d9c5f5ea89e84377
Branch	main
Path or archive member	apps/web/components/layout/header-nav-link.tsx
Original SHA-256	79dbf8f377320e3634fdc6e49bc1f6c4ea78821005c032d59282d93b82f11587
Git blob SHA	5aa4dc0d8d3a94770e71ac1d722c5c191516cd73
Reading-copy SHA-256	79dbf8f377320e3634fdc6e49bc1f6c4ea78821005c032d59282d93b82f11587

Original source ↗

Recovered source transcript

Download complete source text ↓49 lines · 1.4 KB

'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { cn } from '@/lib/utils'

interface NavLinkProps {
  href: string
  children: React.ReactNode
  exact?: boolean
}

/**
 * Navigation link component with active state handling
 * Features: Bold active state, underline animation on hover
 *
 * @param href - The link URL
 * @param children - Link content
 * @param exact - Whether to match exact path
 * @returns JSX.Element - Navigation link
 */
export function NavLink({ href, children, exact = false }: NavLinkProps) {
  const pathname = usePathname()

  // Calculate isActive with proper route matching
  const isActive = exact
    ? pathname === href
    : href === '/'
      ? pathname === '/'
      : pathname === href || pathname.startsWith(`${href}/`)

  return (
    <Link
      href={href}
      className={cn(
        'relative text-sm font-medium transition-colors duration-200',
        'after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:origin-left after:scale-x-0 after:bg-foreground after:transition-transform after:duration-200',
        'hover:after:scale-x-100',
        isActive
          ? 'text-foreground font-bold after:scale-x-100'
          : 'text-muted-foreground hover:text-foreground'
      )}
      aria-current={isActive ? 'page' : undefined}
    >
      {children}
    </Link>
  )
}