examples-slider.md
基本信息
- 类型: React Client 组件
- 路径:
./src/components/prompts/examples-slider.tsx
功能描述
示例滑动器组件,用于在Prompt卡片中轮播展示主媒体和用户示例。支持图片和视频,悬停时自动轮播,显示用户头像和名称。
导出内容
ExamplesSlider - 主组件
ExamplesSliderProps - Props接口
Props 接口
| 属性 | 类型 | 说明 |
| examples | array | 示例数组 |
| mainMediaUrl | string | 主媒体URL |
| title | string | Prompt标题(用于alt文本) |
| isVideo | boolean | 是否为视频类型 |
| className | string | 自定义类名 |
示例数据结构
| 属性 | 类型 | 说明 |
| id | string | 示例ID |
| mediaUrl | string | 媒体URL |
| user | object | 用户信息 |
| user.username | string | 用户名 |
| user.name | string \ | null | 用户名称 |
| user.avatar | string \ | null | 用户头像 |
依赖
react - React核心
@/lib/utils - 工具函数
@/components/ui/avatar - 头像组件
相关组件
PromptCard - 集成示例滑动器
MediaPreview - 媒体预览组件