konowebcodecs/apps/website/src/components/Playground/LinearProgressWithLabel.tsx
2022-10-06 20:52:39 +08:00

24 lines
682 B
TypeScript

import * as React from "react";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import LinearProgress, {
LinearProgressProps,
} from "@mui/material/LinearProgress";
export default function LinearProgressWithLabel(
props: LinearProgressProps & { value: number }
) {
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>
);
}