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