24 lines
No EOL
780 B
TypeScript
24 lines
No EOL
780 B
TypeScript
import { LinearProgressProps, Box, LinearProgress, Typography } from '@mui/material';
|
|
import React from 'react';
|
|
|
|
// The following code has been taken from the mui example
|
|
// Thanks for that mui
|
|
|
|
export type LinearProgressWithLabelProps = LinearProgressProps & { value: number };
|
|
|
|
const LinearProgressWithLabel: React.FC<LinearProgressWithLabelProps> = (props) => {
|
|
return (
|
|
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
|
<Box sx={{ width: '100%', mr: 1 }}>
|
|
<LinearProgress variant="determinate" {...props} />
|
|
</Box>
|
|
<Box sx={{ minWidth: 35 }}>
|
|
<Typography variant="body2" color="text.secondary">{`${Math.round(
|
|
props.value,
|
|
)}%`}</Typography>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default LinearProgressWithLabel; |