mirror of
https://github.com/KuekHaoYang/KVideo.git
synced 2026-08-20 03:03:43 +08:00
kuekhaoyang
ad9e75bc8c
- Added EpisodeList component for displaying a list of episodes with selection functionality. - Created PlayerError component to handle and display video playback errors. - Developed VideoMetadata component to show detailed information about the video. - Implemented VideoPlayer component for video playback with error handling and loading states. - Introduced EmptyState and NoResults components for search results handling. - Created ResultsHeader component to display search results summary. - Developed SearchForm component for user input and search initiation. - Implemented SourceBadges component to show available video sources. - Created VideoGrid component to display search results in a grid format. - Added useSearchCache and useSearchStream hooks for managing search state and caching results. - Implemented useVideoPlayer hook for fetching and managing video details. - Added utility function to map source IDs to their respective names.
43 lines
1.0 KiB
TypeScript
43 lines
1.0 KiB
TypeScript
'use client';
|
|
|
|
import { Card } from '@/components/ui/Card';
|
|
import { Badge } from '@/components/ui/Badge';
|
|
import { Icons } from '@/components/ui/Icon';
|
|
|
|
interface Source {
|
|
id: string;
|
|
name: string;
|
|
count: number;
|
|
}
|
|
|
|
interface SourceBadgesProps {
|
|
sources: Source[];
|
|
className?: string;
|
|
}
|
|
|
|
export function SourceBadges({ sources, className = '' }: SourceBadgesProps) {
|
|
if (sources.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Card hover={false} className={`p-4 ${className}`}>
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<span className="text-sm font-semibold text-[var(--text-color)] flex items-center gap-2">
|
|
<Icons.Check size={16} className="text-[var(--accent-color)]" />
|
|
可用源 ({sources.length}):
|
|
</span>
|
|
{sources.map((source) => (
|
|
<Badge
|
|
key={source.id}
|
|
variant="secondary"
|
|
className="text-xs"
|
|
>
|
|
{source.name} ({source.count})
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|