| 1 | /** |
| 2 | * VideoPlaceholder - 视频占位图组件 |
| 3 | * 当视频没有封面时显示，自动适配深色/浅色主题 |
| 4 | */ |
| 5 | |
| 6 | import { Video } from 'lucide-react' |
| 7 | import { memo } from 'react' |
| 8 | import { cn } from '@/utils/className' |
| 9 | |
| 10 | interface VideoPlaceholderProps { |
| 11 | /** 自定义类名 */ |
| 12 | className?: string |
| 13 | } |
| 14 | |
| 15 | export const VideoPlaceholder = memo(({ className }: VideoPlaceholderProps) => { |
| 16 | return ( |
| 17 | <div |
| 18 | className={cn( |
| 19 | 'absolute inset-0 w-full h-full flex items-center justify-center bg-muted', |
| 20 | className, |
| 21 | )} |
| 22 | > |
| 23 | {/* 圆形图标容器 */} |
| 24 | <div className="w-16 h-16 rounded-full bg-muted-foreground/10 flex items-center justify-center"> |
| 25 | <Video className="w-8 h-8 text-muted-foreground/50" /> |
| 26 | </div> |
| 27 | </div> |
| 28 | ) |
| 29 | }) |
| 30 | |
| 31 | VideoPlaceholder.displayName = 'VideoPlaceholder' |
| 32 |