Component Categories
Pokemon Components
Display and interact with Pokemon data including cards, galleries, and detail views
Type Calculator
Calculate type effectiveness and manage type selection for Pokemon battles
Evolution Chain
Visualize Pokemon evolution chains with special support for Eeveelutions
Favorite System
Toggle and manage favorite Pokemon with persistent storage
Pokemon Display Components
These components handle the display and interaction with Pokemon data:- PokemonCard - Individual Pokemon card with image, types, and favorite button
- PokeGallery - Full-featured gallery with filtering, sorting, and pagination
- PokemonDetailView - Comprehensive detail view with variety selection and stats
Type System Components
Calculate and display Pokemon type effectiveness:- TypeCalculator - Complete type effectiveness calculator
- TypeSelector - Type selection interface with visual feedback
Evolution Components
- EvolutionChain - Server-side component for displaying evolution chains
Interactive Elements
- FavoriteButton - Toggle favorite status with Zustand store integration
Design Principles
Type Safety
All components are built with TypeScript and use strict type definitions from the@/types package.
Client Components
Most components use the'use client' directive for client-side interactivity, with the exception of EvolutionChain which is a server component.
Theme System
Components leverage thePOKE_THEMES constant to provide consistent type-based styling across the application.
Performance
Components use React best practices including:memofor expensive rendersuseMemofor computed values- Efficient state management with Zustand