Тестовое задание в Only

Задание:

Реализовать блок в соответствии с макетом

Блок содержит информацию о временных отрезках, в каждом из которых существует несколько событий.

При переключении временных отрезков изменяются соответствующие числа и под ними показывается новый слайдер, который содержит подробную информацию по ключевым событиям на активном временном отрезке.

Возможно существование от 2 до 6 временных отрезков. Все интерактивные точки на окружности располагаются на одинаковом расстоянии друг от друга

Требования к коду:

• Необходимо использовать Typescript
• Можно использовать React.js или нативный JS на Ваш выбор
• Стилизация с использованием SASS/SCSS (В случае работы с React.js, возможно использование styled-components)
• Сборка проекта с помощью Webpack
• Для работы со слайдерами необходимо использовать библиотеку Swiper
• Для реализации js-анимаций можно использовать библиотеку gsap

Stack:

• React
• TS
• SCSS
• Swiper (нижний слайдер)
• Gasp (используется для анимации появления слайдера и анимации изменения дат)
• Webpack

Инструкция по установке:

Описание	Команда
1. Клонируем репозиторий	git clone https://github.com/skyzavr/only_test-task.git
2. Устанавливаем зависимости	npm install or npm i
3. Запускаем	npm run dev