mirror of
https://github.com/KuekHaoYang/KVideo.git
synced 2026-08-22 04:03:42 +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.
52 lines
1.2 KiB
TypeScript
52 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
|
|
interface CardProps {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
hover?: boolean;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
export function Card({ children, className = '', hover = true, onClick }: CardProps) {
|
|
const hoverStyles = hover
|
|
? "hover:translate-y-[-5px] hover:scale-[1.02] hover:shadow-[0_8px_24px_var(--shadow-color)] cursor-pointer transition-all duration-[var(--transition-fluid)]"
|
|
: "transition-all duration-[var(--transition-fluid)]";
|
|
|
|
const baseClasses = `
|
|
bg-[var(--glass-bg)]
|
|
backdrop-blur-[25px]
|
|
saturate-[180%]
|
|
[-webkit-backdrop-filter:blur(25px)_saturate(180%)]
|
|
rounded-[var(--radius-2xl)]
|
|
shadow-[0_2px_8px_var(--shadow-color)] md:shadow-[var(--shadow-md)]
|
|
border
|
|
border-[var(--glass-border)]
|
|
p-4 md:p-6
|
|
relative
|
|
${hoverStyles}
|
|
${className}
|
|
`;
|
|
|
|
// Use semantic button when interactive
|
|
if (onClick) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={onClick}
|
|
className={`${baseClasses} text-left w-full`}
|
|
>
|
|
{children}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
// Use div for non-interactive cards
|
|
return (
|
|
<div className={baseClasses}>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
|