32 lines
655 B
TypeScript
32 lines
655 B
TypeScript
import React from 'react';
|
|
|
|
interface IProps {
|
|
scale: number;
|
|
live?: boolean;
|
|
left: number;
|
|
time: number;
|
|
}
|
|
|
|
const styles = {
|
|
display: 'block',
|
|
pointerEvents: 'none' as const,
|
|
height: '10px',
|
|
zIndex: 1,
|
|
}
|
|
const replayBg = '#d0d4f2' // active blue border
|
|
const liveBg = 'rgba(66, 174, 94, 0.3)' // light green shade
|
|
|
|
/** Playtime progress bar */
|
|
export function ProgressBar ({ scale, live = false, left, time }: IProps) {
|
|
return (
|
|
<div
|
|
style={{
|
|
...styles,
|
|
width: `${ time * scale }%`,
|
|
backgroundColor: live && left > 99 ? liveBg : replayBg
|
|
}}
|
|
/>
|
|
)
|
|
}
|
|
|
|
ProgressBar.displayName = 'ProgressBar';
|