You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
29 lines
681 B
29 lines
681 B
4 years ago
|
import { withStyles } from '@material-ui/core/styles';
|
||
|
|
import { LinearProgress } from '@material-ui/core';
|
||
|
|
import { PURPLE_OFF, RED_ON } from '../lib/consts/DEFAULT_THEME';
|
||
|
|
|
||
|
|
const BorderLinearProgress = withStyles({
|
||
|
|
root: {
|
||
|
|
height: 10,
|
||
|
|
borderRadius: 5,
|
||
|
|
},
|
||
|
|
colorPrimary: {
|
||
|
|
backgroundColor: PURPLE_OFF,
|
||
|
|
},
|
||
|
|
bar: {
|
||
|
|
borderRadius: 5,
|
||
|
|
backgroundColor: RED_ON,
|
||
|
|
},
|
||
|
|
})(LinearProgress);
|
||
|
|
|
||
|
|
const AllocationBar = ({ allocated }: { allocated: number }): JSX.Element => {
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<BorderLinearProgress variant="determinate" value={allocated} />
|
||
|
|
<LinearProgress variant="determinate" value={0} />
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default AllocationBar;
|