Доработка компонента галереи в Nuxt 3 (TSX + FC) + Tailwind

Цена договорная
24 июля 2024, 18:18 • 3 отклика • 21 просмотр
Требуется доработать готовый компонент на странице на Nuxt 3 + NuxtUI + Tailwind

Дизайн в Figma: https://www.figma.com/design/ImTrkPJLCskd4YoSiP50D...
Свёрстанные страницы и готовые компоненты, которые можно переиспользовать, можно посмотреть на странице "Дизайн" там же - в Figma.

Исходные данные: на странице /testo-flat проекта реализована часть вёрстки из макета, но нет переключателя планировки и плана этажа

Задача:
  1. Сверстать кнопки переключения планировки и плана этажа согласно макета
  2. Реализовать функционал переключения планировки и плана этажа
Требуемое тех. решение:
  1. Предусмотреть параметр (props) компонента для указания ссылки на план этажа
  2. При указании параметра ссылки на план этажа начинает отображаться переключатель планировки/плана этажа
  3. План этажа поставить последним в карусели изображений (изображения передаются массивом в параметре в компонент галереи)
  4. При переключении на планировку отображать первое изображение из массива из входных параметров компонента через готовый метод API
  5. При переключении на план этажа отображать последнее изображение
  6. Вёрстка переключателя должна быть адаптивной согласно макета
Тех. детали:
  1. Компоненты являются функциональными и используют TSX
  2. Вёрстка должна быть адаптивной - от 350px, в макете есть вид для настольного компьютера и мобильного телефона
  3. Код должен проходить типизацию TypeScript и линтер ESLint без ошибок, которые настроены на проекте (готовые команды есть в package.json)
  4. Код, название файлов и их расположение не должны нарушать имеющуюся архитектуру проекта
  5. Проект может быть развёрнут через docker-compose.yml + Makefile
Стек для работы:
При успешном выполнении задания будет рассмотрен вариант работы над backend частью проекта, вёрстка следующей части проекта из нескольких страниц, а так же возможность работы над другими проектами на том же стеке.
Файлы