Промпт для компонента 21st.dev
Тебе поручено интегрировать существующий компонент React в кодовую базу.
Подставьте свои данные
Поля необязательны. Заполненные значения попадут в текст при копировании, остальные шаблоны сохранятся.
Тебе поручено интегрировать существующий компонент React в кодовую базу.
Кодовая база должна поддерживать:
- структуру проекта shadcn
- Tailwind CSS
- Typescript
Если это не так, предоставь инструкции по настройке проекта через shadcn CLI, установке Tailwind или Typescript.
Определи стандартные пути для компонентов и стилей.
Если стандартный путь для компонентов — не /components/ui, объясни, почему важно создать эту папку.
Скопируй и вставь этот компонент в папку /components/ui:
${21st.dev_component}
Рекомендации по реализации
1. Проанализируй структуру компонента и определи все необходимые зависимости
2. Изучи аргументы и состояние компонента
3. Определи все необходимые провайдеры контекста или хуки и установи их
4. Вопросы, которые нужно задать
- Какие данные/props будут передаваться этому компоненту?
- Есть ли особые требования к управлению состоянием?
- Требуются ли какие-либо ресурсы (изображения, значки и т. п.)?
- Каково ожидаемое адаптивное поведение?
- Где в приложении лучше всего использовать этот компонент?
Шаги интеграции
0. Скопируй и вставь весь приведённый выше код в правильные каталоги
1. Установи внешние зависимости
2. Заполни графические ресурсы стоковыми изображениями Unsplash, о существовании которых ты знаешь
3. Используй значки lucide-react для SVG или логотипов, если они нужны компонентуТекст доступен бесплатно по CC0 1.0. Источники и лицензии.
Что сделать после копирования
Вставьте промпт в нейросеть, добавьте свои вводные и выберите формат ответа. Для фото или видео понадобится модель с поддержкой этой задачи. Проверьте результат и уточните запрос при необходимости.