41 lines
944 B
TypeScript
41 lines
944 B
TypeScript
import { Box, colors } from "@mui/material";
|
|
import { makeStyles } from "@mui/styles";
|
|
|
|
interface Props {
|
|
colour: string;
|
|
completed: number;
|
|
}
|
|
|
|
const useStyles = makeStyles(() => ({
|
|
container: {
|
|
height: 20,
|
|
width: "100%",
|
|
backgroundColor: "#e0e0de",
|
|
borderRadius: 50
|
|
},
|
|
filler: {
|
|
height: "100%",
|
|
// width: `${completed}%`,
|
|
// backgroundColor: bgcolor,
|
|
borderRadius: "inherit",
|
|
textAlign: "right"
|
|
},
|
|
label: {
|
|
padding: 5,
|
|
color: colors.grey[900],
|
|
fontWeight: "bold"
|
|
}
|
|
})
|
|
);
|
|
|
|
export default function CustomProgressBar(props: Props) {
|
|
const { colour, completed } = props;
|
|
const classes = useStyles();
|
|
return (
|
|
<Box className={classes.container}>
|
|
<Box className={classes.filler} style={{ width: completed + "%", backgroundColor: colour }}>
|
|
<span className={classes.label}>{completed}%</span>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|