Description

As a user, I want to preview key Pokémon information directly in the card view, making it easier to browse and compare Pokémon without having to navigate to the details page for basic information.

Expected Behavior

• Enhanced cards should display:
  • All existing information (ID, name, image)
  • Preview of the same information available in details:
    • Pokémon types (e.g., Fire, Water)
    • Base stats (HP, Attack, Defense, etc.)
    • Abilities (max 2 visible, additional ones shown as "+X more")

Style Guide

Type Badges

• Base styles:
  • text-xs font-medium text-white
  • Background color: Use getTypeColor() function
• Hover:
  • scale-105

Ability Badges

• Base styles:
  • text-xs
  • border-gray-300 text-gray-700
• Hover:
  • border-blue-400 text-blue-600
• Label text: text-sm font-medium text-gray-600
• "+X more" badge: Same as base styles without hover effects

Acceptance Criteria

• [ ] Card displays Pokémon types with appropriate styling
• [ ] Card shows up to 2 abilities
  • [ ] If more than 2 abilities exist, display "+X more" indicator
• [ ] Layout remains clean and organized with new information
• [ ] Component is responsive across all breakpoints

Mockup