mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-13 03:13:47 +00:00
Carlos Valente
5e481d49da
* style: labels on added time * style: remove mentions of PiP * refactor: unify usage of ms for timers * refactor: create events with 0 duration * style: several small tweaks * refactor: keep block when applying delays * feat: blocks have titles * style: improvements in time entry warnings * style: override progress bar styles * style: prevent overflow * feat: show character count in editor * refactor: provide initial payload * refactor: lower test boundary * refactor: get colour from swatches * style: rename title block * chore: version bump
23 lines
620 B
TypeScript
23 lines
620 B
TypeScript
import { clamp } from '../../utils/math';
|
|
|
|
import './ProgressBar.scss';
|
|
|
|
interface ProgressBarProps {
|
|
now?: number;
|
|
complete?: number;
|
|
hidden?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
export default function ProgressBar(props: ProgressBarProps) {
|
|
const { now = 0, complete = 100, hidden, className = '' } = props;
|
|
|
|
const percentComplete = clamp(100 - (Math.max(now, 0) * 100) / complete, 0, 100);
|
|
|
|
return (
|
|
<div className={`progress-bar__bg ${hidden ? 'progress-bar__bg--hidden' : ''} ${className}`}>
|
|
<div className='progress-bar__indicator' style={{ width: `${percentComplete}%` }} />
|
|
</div>
|
|
);
|
|
}
|