40 lines
1.1 KiB
YAML
40 lines
1.1 KiB
YAML
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: []
|