Урок 18. Задания
⚡ Кратко
Три задания на чтение и правку компонента и четыре вопроса.
Задания
Задание 1. Прочитать компонент
Откройте src/components/ui/badge.tsx в своём проекте
и ответьте: какие варианты у него есть, какой из них по умолчанию,
какие data-slot используются и что делает конструкция
[&>svg]:size-3!.
Задание 2. Расширить кнопку
Добавьте в button.tsx вариант brand
и размер xl. Проверьте, что подсказки TypeScript обновились,
а внешний className по-прежнему переопределяет отступы.
Задание 3. Компонент по канону
Напишите с нуля компонент Kbd для отображения клавиш
(Ctrl, K): базовые классы, два варианта размера,
data-slot="kbd", приём внешнего className.
Проверка понимания
Выберите один вариант ответа — правильный подсветится после клика.
Вопрос 1
Что делает data-slot в компонентах реестра?
Вопрос 2
Как читается [&_svg]:shrink-0?
Вопрос 3
Почему className передают последним аргументом в cn() или cva?
Вопрос 4
Чем полезна конструкция [--card-spacing:--spacing(4)] с py-(--card-spacing)?