Читать на других языках: Русский, Українська.

Напиши приложение поиска изображений по ключевому слову. Превью рабочего приложения смотри по ссылке.

Создай компоненты <Searchbar>, <ImageGallery>, <ImageGalleryItem>, <Loader>, <Button> и <Modal>. Готовые стили компонентов можно взять в файле styles.css и подправить под себя, если необходимо.

Для HTTP-запросов используй публичный сервис поиска изображений Pixabay. Зарегистрируйся и получи приватный ключ доступа.

URL-строка HTTP-запроса.

https://pixabay.com/api/?q=cat&page=1&key=your_key&image_type=photo&orientation=horizontal&per_page=12

Pixabay API поддерживает пагинацию, по умолчанию параметр page равен 1. Пусть в ответе приходит по 12 объектов, установлено в параметре per_page. Не забудь что при поиске по новому ключевому слову, необходимо сбрасывать значение page в 1.

В ответе от апи приходит массив объектов, в которых тебе интересны только следущие свойства.

• id - уникальный идентификатор
• webformatURL - ссылка на маленькое изображение для списка карточек
• largeImageURL - ссылка на большое изображение для модального окна

Компонент принимает один проп onSubmit - функцию для передачи значения инпута при сабмите формы. Создает DOM-элемент следующей структуры.

<header class="searchbar">
  <form class="form">
    <button type="submit" class="button">
      <span class="button-label">Search</span>
    </button>

    <input
      class="input"
      type="text"
      autocomplete="off"
      autofocus
      placeholder="Search images and photos"
    />
  </form>
</header>

Список карточек изображений. Создает DOM-элемент следующей структуры.

<ul class="gallery">
  <!-- Набор <li> с изображениями -->
</ul>

Компонент элемента списка с изображением. Создает DOM-элемент следующей структуры.

<li class="gallery-item">
  <img src="" alt="" />
</li>

При нажатии на кнопку Load more должна догружаться следующая порция изображений и рендериться вместе с предыдущими. Кнопка должна рендерится только тогда, когда есть какие-то загруженные изобаржения. Если массив изображений пуст, кнопка не рендерится.

Компонент спинера, отображется пока идет загрузка изобаржений. Используй любой готовый компонент, например react-loader-spinner или любой другой.

При клике по элементу галереи должно открываться модальное окно с темным оверлеем и отображаться большая версия изображения. Модальное окно должно закрываться по нажатию клавиши ESC или по клику на оверлее.

Внешний вид похож на функционал этого VanillaJS-плагина, только вместо белого модального окна рендерится изображение (в примере нажми Run). Анимацию делать не нужно!

<div class="overlay">
  <div class="modal">
    <img src="" alt="" />
  </div>
</div>