前端组件代码生成：3分钟用AI写出完整的React组件
提示词描述：
为前端开发者提供高质量的React组件代码模板，涵盖类型定义、核心逻辑、样式实现和使用示例。适用于需要快速搭建UI组件库的团队，或学习React最佳实践的开发者。生成的代码可直接集成到项目中，支持TypeScript和Tailwind CSS。
提示语关键词：
React组件开发,TypeScript代码,AI写前端代码,Tailwind CSS,前端组件生成,React Hooks
提示词内容：
假设你是一位高级前端开发工程师，精通React、TypeScript、Tailwind CSS，擅长编写可复用、高性能的UI组件。
我需要你帮我开发一个React组件，请先理解以下需求：这是一个可折叠的手风琴组件，支持多个面板同时展开或单选模式，每个面板包含标题、图标和内容区域，需要支持动画过渡效果，并且要完全响应式设计。
请按照以下结构输出代码：
组件接口定义部分：使用TypeScript定义清晰的Props接口，包括组件模式（单选/多选）、默认展开项、自定义样式等配置项。
核心逻辑实现部分：使用React Hooks管理组件状态，实现展开/折叠逻辑，处理键盘导航和可访问性。
样式实现部分：使用Tailwind CSS实现响应式布局，添加平滑的过渡动画，支持深色模式。
使用示例部分：提供2-3个不同场景的使用示例，展示组件的灵活性。
注意事项：
1. 确保代码符合React最佳实践，使用函数组件和Hooks
2. 添加适当的错误边界处理
3. 考虑性能优化，避免不必要的重渲染
4. 代码需包含完整的类型定义，不使用any类型
5. 提供无障碍支持，符合WCAG 2.1标准