Ответ
Верстал различные компоненты для 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), блядь! И чтобы при наведении, нажатии и фокусе всё красиво подсвечивалось, а не глючило, как первая любовь. В общем, работа была — не хуй собачий.