mirror of
https://github.com/KuekHaoYang/KVideo.git
synced 2026-08-19 02:33: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.
32 lines
837 B
TypeScript
32 lines
837 B
TypeScript
import React from 'react';
|
|
|
|
interface BadgeProps {
|
|
children: React.ReactNode;
|
|
variant?: 'primary' | 'secondary';
|
|
className?: string;
|
|
}
|
|
|
|
export function Badge({ children, variant = 'primary', className = '' }: BadgeProps) {
|
|
const variants = {
|
|
primary: "bg-[var(--accent-color)] text-white shadow-[var(--shadow-sm)]",
|
|
secondary: "bg-[var(--glass-bg)] backdrop-blur-[10px] [-webkit-backdrop-filter:blur(10px)] border border-[var(--glass-border)] text-[var(--text-color)]",
|
|
};
|
|
|
|
return (
|
|
<span
|
|
className={`
|
|
inline-flex items-center justify-center
|
|
px-2 py-0.5 md:px-3 md:py-1
|
|
rounded-[var(--radius-full)]
|
|
text-[10px] md:text-xs font-semibold
|
|
transition-all duration-200
|
|
${variants[variant]}
|
|
${className}
|
|
`}
|
|
>
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|
|
|