Макет: https://www.figma.com/file/QOHXuTHr6hKChqiTw6KEmY/front-test-task
Данные: https://jsonplaceholder.typicode.com Необходимо сверстать предложенный макет и написать простое SPA на React или Vue.
Задача:
-
Вывести 10 пользователей соответственно макету, слайдером. Данные о пользователях взять с https://jsonplaceholder.typicode.com/users С помощью оранжевых стрелок должно осуществляться управление слайдером: сдвиг на 1 влево или вправо.
-
Вывести на карточку пользователя данные: (name, company.name, image***)
-
При клике на пользователя он должен выделиться в слайдере, а внизу должен появится блок с 3мя постами выбранного пользователя. Данные взять с https://jsonplaceholder.typicode.com/posts, необходимо добавить нужные параметры в запрос для фильтрации. Вывести для каждого поста данные: (title, body).
*** В карточке пользователя для заглушки изображения использовать сервис https://pravatar.cc/ или любой другой. Плюсами (не обязательными, но желательными) при выполнении задания являются:
-
Учет адаптивности (отдельного адаптивного макета нет, внешний вид на экранах до 1024 px на усмотрение разработчика).
-
Переиспользование блоков.
-
Разделение кода на компоненты.
-
Использование TypeScript, Webpack, Styled-components.
Ждем от вас ссылку на Github с выполненным тестовым заданием. Срок - не более недели с момента постановки задачи.