Description

As a user, I want to see a detailed view of a specific Pokémon when I click on its card, so that I can learn more about its characteristics, abilities, and stats in a dedicated page. The experience should be smooth and engaging.

Expected Behavior

• Detailed page should display:
  • Navigation back to main Pokédex
  • Pokémon ID and name in the header
  • Large Pokémon image
  • Physical characteristics:
    • Height (convert from decimeters to meters)
    • Weight (convert from hectograms to kilograms)
  • Pokémon types (e.g., Fire, Water) with appropriate type colors
  • All abilities with descriptions
  • Base stats with visual progress bars:
    • Display each stat name and its value (e.g., "HP: 60")
    • Progress bar width should be calculated as (base_stat / 255) * 100
    • Stats to display: HP, Attack, Defense, Special Attack, Special Defense, Speed

Acceptance Criteria

• [ ] Page implements proper routing with dynamic [id] parameter
• [ ] Header section includes:
  • [ ] Back button to return to main Pokédex
  • [ ] Pokémon name and ID number (#001 format)
• [ ] Main content displays:
  • [ ] Large Pokémon image with loading state
  • [ ] Height and weight in metric units
  • [ ] Type badges with appropriate colors
  • [ ] List of abilities with descriptions
  • [ ] Stats chart showing all base stats with progress bars
• [ ] Loading and Error States:
  • [ ] Handle loading states appropriately
  • [ ] Show helpful error messages
  • [ ] Manage failed data fetches gracefully
• [ ] Responsive design:
  • [ ] Layout adapts to mobile devices
  • [ ] Content remains readable at all breakpoints

User Experience Considerations

• The page should be responsive and fast, rendering data as soon as it becomes available.
• Content should load without jarring layout shifts
• Error states should be clear and helpful

Style Guide

Colors and Classes

• Background: from-blue-50 via-white to-purple-50 (with bg-gradient-to-br)
• Header:
  • Background: bg-white/80 backdrop-blur-md
  • Border: border-b border-gray-200
  • Pokemon Name: from-blue-600 to-purple-600 (with bg-gradient-to-r bg-clip-text text-transparent text-3xl font-bold)
  • Pokemon ID: text-lg font-normal text-muted-foreground
• Card:
  • Background: from-white via-blue-50/30 to-purple-50/30 (with bg-gradient-to-br)
  • Height/Weight:
    • Label: text-sm text-muted-foreground
    • Value: text-2xl font-bold text-gray-800
  • Type Badges:
    • Style: text-base font-medium text-white
    • Background: Use getTypeColor helper function
  • Section Titles:
    • Style: text-xl font-semibold text-gray-800
    • Examples: "Abilities", "Base Stats"
  • Ability Badges:
    • Regular Ability: variant="default" text-xs
    • Hidden Ability: variant="destructive" text-xs
    • Hidden Label: Add variant="outline" badge with "Hidden" text beside the ability name
• Stats:
  • Label: font-medium text-gray-700
  • Value: font-bold text-gray-800