Pokedex — каталог покемонів

Побудуй додаток-каталог покемонів з використанням компонентів, props, useState та умовного рендерингу. Дані візьмеш з безкоштовного PokeAPI.

Підготовка

npm create vite@latest pokedex -- --template react-ts
cd pokedex
npm install
npm run dev

Завдання

1. Компонент PokemonCard

Створи перевикористовуваний компонент картки покемона:

interface PokemonCardProps {
  name: string
  image: string
  types: string[]
  id: number
}

Картка показує: зображення, ім'я (з великої літери), номер (#001), список типів (як бейджики різних кольорів).

2. Завантаження даних

Використай PokeAPI для отримання перших 150 покемонів:

https://pokeapi.co/api/v2/pokemon?limit=150

Для кожного покемона потрібен окремий запит для деталей (image, types):

https://pokeapi.co/api/v2/pokemon/{id}

3. Пошук за ім'ям

Поле введення зверху сторінки. При введенні тексту список фільтрується в реальному часі (без кнопки "Шукати").

const [search, setSearch] = useState('')

const filtered = pokemons.filter(p =>
  p.name.toLowerCase().includes(search.toLowerCase())
)

4. Фільтр за типом

Кнопки-фільтри для типів: Fire, Water, Grass, Electric, Psychic, Normal (та інші, які знайдеш у даних).

• Клік на кнопку — показати тільки покемонів цього типу
• Повторний клік або кнопка "Всі" — скинути фільтр
• Активна кнопка візуально виділена

5. Порожній стан

Якщо жоден покемон не відповідає фільтрам — показати повідомлення "Покемонів не знайдено" з кнопкою "Скинути фільтри".

6. Стилізація

• Картки в CSS Grid (responsive: 4 колонки → 2 → 1)
• Кольори бейджиків типів (Fire — червоний, Water — синій, Grass — зелений тощо)
• Hover-ефект на картках (тінь або збільшення)

Структура проекту

src/
├── components/
│   ├── PokemonCard.tsx
│   ├── SearchBar.tsx
│   ├── TypeFilter.tsx
│   └── Loader.tsx
├── App.tsx
└── main.tsx

Бонус

• Клік на картку — розкрити додаткову інформацію (stats: HP, Attack, Defense) як модальне вікно або розгортку
• Сортування за ім'ям (A-Z, Z-A) та номером
• Лічильник: "Знайдено 23 з 150 покемонів"
• Анімація появи карток (CSS transitions)

Критерії оцінки