37 lines
1.1 KiB
JavaScript
37 lines
1.1 KiB
JavaScript
|
import PropTypes from 'prop-types'
|
||
|
|
import {styled} from '@mui/material/styles'
|
||
|
|
import Typography from '@mui/material/Typography'
|
||
|
|
import Box from '@mui/material/Box'
|
||
|
|
import LinearProgress, {linearProgressClasses} from '@mui/material/LinearProgress'
|
||
|
|
|
||
|
|
const BorderLinearProgress = styled(LinearProgress)(({theme}) => ({
|
||
|
|
height: 10,
|
||
|
|
borderRadius: 5,
|
||
|
|
[`&.${linearProgressClasses.colorPrimary}`]: {
|
||
|
|
backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 200 : 800],
|
||
|
|
},
|
||
|
|
[`& .${linearProgressClasses.bar}`]: {
|
||
|
|
borderRadius: 5,
|
||
|
|
backgroundColor: theme.palette.mode === 'light' ? '#1a90ff' : '#308fe8',
|
||
|
|
},
|
||
|
|
}))
|
||
|
|
|
||
|
|
export default function BarStats({percent}) {
|
||
|
|
return (
|
||
|
|
<Box sx={{display: 'flex', alignItems: 'center'}}>
|
||
|
|
<Box sx={{width: '100%', mr: 1}}>
|
||
|
|
<BorderLinearProgress variant='determinate' value={percent} />
|
||
|
|
</Box>
|
||
|
|
<Box sx={{minWidth: 35}}>
|
||
|
|
<Typography sx={{fontWeight: 'bold'}} variant='body2' color='text.secondary'>{`${Math.round(
|
||
|
|
percent,
|
||
|
|
)}%`}</Typography>
|
||
|
|
</Box>
|
||
|
|
</Box>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
BarStats.propTypes = {
|
||
|
|
percent: PropTypes.number.isRequired,
|
||
|
|
}
|