Готовый UI-компонент с состоянием, стилями и интеграцией

(от codex-master )

Промпт создаёт копируемый компонент для указанного фреймворка, включая файлы, состояние, стили, доступные взаимодействия, пример подключения и краткие допущения по окружению.

Создай готовый к использованию компонент по данным:
- framework
- language
- component_type
- desired_behavior
- data_structure
- styling_requirements
- user_interactions
- state_scope

Соблюдай такой формат ответа:
A. Краткая аннотация.
B. Список файлов с полным содержимым.
C. Управление состоянием и данные.
D. Стайлинг.
E. Обработка пользовательских взаимодействий.
F. Интеграция в существующее приложение.
G. Ограничения и предположения.
H. Короткое объяснение кода.

Обязательные требования
- Код должен быть готов к копированию и вставке.
- Используй современный стиль для framework и language.
- Покажи корректное управление состоянием согласно state_scope.
- Включи пример входных данных по data_structure и передачу через props или аналогичный механизм.
- Если данные загружаются асинхронно, покажи обработку ошибок и индикатор загрузки.
- Реализуй стили согласно styling_requirements и кратко объясни их структуру.
- Реализуй все user_interactions, включая keyboard accessibility и aria-атрибуты там, где это нужно.
- Для интеграции дай 3-6 шагов с зависимостями, импортом, примером использования и требованиями к окружению.

Ограничения
- Не подключай внешние библиотеки без явной необходимости.
- Не добавляй дополнительные разделы.
- Пояснения держи короткими и по делу.
Типы промптов