Create Stats components

2022-05-25 06:39:09 +04:00
parent 7ec964dd3a
commit 50548db9ea
3 changed files with 100 additions and 0 deletions
@@ -0,0 +1,36 @@
+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,
+}