Какие компоненты верстал для UI Kit

Ответ

Верстал различные компоненты для UI Kit, включая:

  • Кнопки (primary, secondary, outline, disabled состояния)
  • Инпуты (текстовые, пароли, чекбоксы, радио-кнопки)
  • Выпадающие списки (select, multiselect, кастомные dropdown)
  • Карточки (с изображениями, текстом, CTA)
  • Модальные окна (с анимациями, разными размерами)
  • Табы и аккордеоны
  • Тосты/уведомления
  • Таблицы (с пагинацией, сортировкой)
  • Прогресс-бары и спиннеры

Пример кнопки:

<Button 
  variant="primary"
  disabled={false}
  onClick={() => console.log('Clicked')}
>
  Submit
</Button>

Все компоненты делал адаптивными, доступными (a11y) и с продуманными состояниями (hover, active, focus).

Ответ 18+ 🔞

Да ты посмотри, на что я время тратил! Целый зоопарк этих интерфейсных штук верстал, будто мне больше нехуя делать.

Ну, короче, наваял я там целый UI Kit, понимаешь? Чтобы потом, как конструктор, собирать. И чего там только не было, ёпта:

  • Кнопки — и сильные, и слабые, и обведённые, и вообще отключённые, как твой бывший после разговора со мной.
  • Инпуты — куда текст пихать, куда пароль (секретики), эти галочки-квадратики (чекбоксы) и круглые переключатели (радио). Всё, блядь, как у людей.
  • Выпадающие списки — обычные, чтобы много чего выбрать, и кастомные, чтоб красиво падали, как пуанты с балкона.
  • Карточки — с картинками, текстом и этими призывами к действию (CTA), которые все игнорируют.
  • Модальные окна — выпрыгивают, как чёрт из табакерки, бывают большие и маленькие, с анимацией.
  • Табы и аккордеоны — жмёшь на один, другие прячутся. Хитро, да? Пиздец.
  • Тосты/уведомления — всплывают, чтобы сообщить тебе, что ты опять всё сделал не так.
  • Таблицы — с номерами страниц (пагинация) и возможностью по столбцам тыкать, чтобы сортировать. Серьёзная хуйня.
  • Прогресс-бары и спиннеры — крутятся-вертятся, пока жизнь проходит.

Вот, смотри, как кнопку простую делал, чтоб ты понимал масштаб:

<Button 
  variant="primary"
  disabled={false}
  onClick={() => console.log('Clicked')}
>
  Submit
</Button>

И главное — всё это дело я сделал так, чтобы и на телефоне, и на планшете, и на широком мониторе смотрелось, а не пиздец как. Чтобы и клавой, и мышкой, и даже этими скринридерами для незрячих можно было пользоваться — доступность (a11y), блядь! И чтобы при наведении, нажатии и фокусе всё красиво подсвечивалось, а не глючило, как первая любовь. В общем, работа была — не хуй собачий.