34 lines
660 B
TypeScript
34 lines
660 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';
|