mirror of
https://github.com/KuekHaoYang/KVideo.git
synced 2026-08-16 17:23:43 +08:00
kuekhaoyang
a7480fb47a
- Implemented MobileVideoPlayer component for mobile video playback. - Added features such as play/pause, skip forward/backward, volume control, and fullscreen support. - Integrated double-tap gesture handling for skipping video. - Included hooks for screen orientation management and mobile detection. - Enhanced user experience with loading indicators and playback speed options.
39 lines
989 B
TypeScript
39 lines
989 B
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)]";
|
|
|
|
return (
|
|
<div
|
|
onClick={onClick}
|
|
className={`
|
|
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}
|
|
`}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
|