import { makeStyles, withStyles } from '@material-ui/core/styles'; import { LinearProgress, Typography } from '@material-ui/core'; import { PURPLE_OFF, PANEL_BACKGROUND, TEXT, } from '../lib/consts/DEFAULT_THEME'; const BorderLinearProgress = withStyles({ root: { height: 25, borderRadius: 3, }, colorPrimary: { backgroundColor: PANEL_BACKGROUND, }, bar: { borderRadius: 3, backgroundColor: PURPLE_OFF, }, })(LinearProgress); const useStyles = makeStyles((theme) => ({ root: { flexGrow: 1, }, margin: { margin: theme.spacing(1), }, leftLabel: { position: 'absolute', color: TEXT, top: 0, left: '5%', }, centerLabel: { position: 'absolute', color: TEXT, top: 0, left: '70%', }, rightLabel: { position: 'absolute', color: TEXT, top: 0, left: '90%', }, })); const ProgressBar = ({ allocated }: { allocated: number }): JSX.Element => { const classes = useStyles(); return (
53.5% 570MiB/s 1:15:30
); }; export default ProgressBar;