mirror of
https://github.com/KuekHaoYang/KVideo.git
synced 2026-08-19 10:43:43 +08:00
kuekhaoyang
3dfcc6565d
- Implemented HistoryEmptyState component for displaying when no viewing history exists. - Created HistoryItem component to represent individual watch history items with video details and delete functionality. - Developed MovieCard component to display individual movie details including poster, title, and rating. - Added MovieGrid component for displaying a grid of movie cards with infinite scroll capabilities. - Introduced TagManager component for managing custom tags with creation, deletion, and filtering functionalities. - Created TypeBadgeItem and TypeBadgeList components for displaying selectable badges with counts. - Added custom hook useInfiniteScroll for managing infinite scroll behavior. - Implemented contrast testing script to ensure WCAG compliance for UI components.
75 lines
1.9 KiB
TypeScript
75 lines
1.9 KiB
TypeScript
/**
|
|
* TypeBadges - Main component for type badge filtering
|
|
* Auto-collects unique type_name values and shows counts
|
|
* Badges disappear when all videos of that type are removed
|
|
* Responsive: Desktop shows expand/collapse, Mobile shows horizontal scroll
|
|
*/
|
|
|
|
'use client';
|
|
|
|
import { Card } from '@/components/ui/Card';
|
|
import { Icons } from '@/components/ui/Icon';
|
|
import { TypeBadgeList } from './TypeBadgeList';
|
|
|
|
interface TypeBadge {
|
|
type: string;
|
|
count: number;
|
|
}
|
|
|
|
interface TypeBadgesProps {
|
|
badges: TypeBadge[];
|
|
selectedTypes: Set<string>;
|
|
onToggleType: (type: string) => void;
|
|
className?: string;
|
|
}
|
|
|
|
export function TypeBadges({
|
|
badges,
|
|
selectedTypes,
|
|
onToggleType,
|
|
className = ''
|
|
}: TypeBadgesProps) {
|
|
if (badges.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
const handleClearAll = () => {
|
|
selectedTypes.forEach(type => onToggleType(type));
|
|
};
|
|
|
|
return (
|
|
<Card
|
|
hover={false}
|
|
className={`p-4 animate-fade-in ${className}`}
|
|
>
|
|
<div className="flex items-start gap-3">
|
|
<div className="flex items-center gap-2 shrink-0 pt-1">
|
|
<Icons.Tag size={16} className="text-[var(--accent-color)]" />
|
|
<span className="text-sm font-semibold text-[var(--text-color)]">
|
|
分类标签 ({badges.length}):
|
|
</span>
|
|
</div>
|
|
|
|
<TypeBadgeList
|
|
badges={badges}
|
|
selectedTypes={selectedTypes}
|
|
onToggleType={onToggleType}
|
|
/>
|
|
</div>
|
|
|
|
{selectedTypes.size > 0 && (
|
|
<div className="mt-3 pt-3 border-t border-[var(--glass-border)]">
|
|
<button
|
|
onClick={handleClearAll}
|
|
className="text-xs text-[var(--text-color-secondary)] hover:text-[var(--accent-color)]
|
|
flex items-center gap-1 transition-colors"
|
|
>
|
|
<Icons.X size={12} />
|
|
清除筛选 ({selectedTypes.size})
|
|
</button>
|
|
</div>
|
|
)}
|
|
</Card>
|
|
);
|
|
}
|