1
0
Fork 0
mirror of https://github.com/sussy-code/smov.git synced 2024-12-25 15:27:40 +01:00
smov/src/components/media/EpisodeButton.tsx

19 lines
641 B
TypeScript
Raw Normal View History

export interface EpisodeProps {
progress?: number;
episodeNumber: number;
}
export function Episode(props: EpisodeProps) {
return (
<div className="bg-denim-500 hover:bg-denim-400 transition-[background-color, transform] relative mr-3 mb-3 inline-flex h-10 w-10 cursor-pointer select-none items-center justify-center overflow-hidden rounded font-bold text-white active:scale-110">
<div
className="bg-bink-500 absolute bottom-0 top-0 left-0 bg-opacity-50"
style={{
width: `${props.progress || 0}%`,
}}
/>
<span className="relative">{props.episodeNumber}</span>
</div>
);
}