task_id: task_component_nav_link
entity_id: component_nav_link
workflow_version: v002
created_at: "2025-12-18T17:08:00"
status: completed
agent: frontend

entity:
  type: component
  name: NavLink
  file_path: components/NavLink.tsx

description: |
  Create a NavLink component that provides styled navigation links with active state.
  Uses Next.js Link and usePathname to detect current page.

file_paths:
  to_create:
    - components/NavLink.tsx

reference_files:
  - components/SongCard.tsx  # Example of existing component styling

implementation_notes: |
  - Use 'use client' directive for usePathname
  - Import Link from 'next/link'
  - Import usePathname from 'next/navigation'
  - Props: href (string, required), children (ReactNode), icon (string, optional)
  - Compare pathname with href for active state
  - Style: zinc-400 default, white when active, zinc-200 on hover
  - Add left border or underline when active

acceptance_criteria:
  - Component exports NavLink function
  - Active state detects current page
  - Hover styling applied
  - Accessible with proper link semantics

dependencies: []