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,40 @@
+import PropTypes from 'prop-types'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
+import Grid from '@mui/material/Grid'
+
+import BarStats from './bar-stats'
+
+export default function TraductionsStats({value, total}) {
+  const translated = total - value
+  const percent = (translated / total) * 100
+
+  return (
+    <Box sx={{width: '100%'}}>
+      <Grid container rowSpacing={3} columnSpacing={6} justifyContent='space-around'>
+        <Grid item xs={12} md={6}>
+          <Typography style={{fontWeight: 'bold'}} align='center' variant='h5'>
+            {translated}
+          </Typography>
+          <Typography variant='h6' align='center' >
+            Paroles traduites
+          </Typography>
+        </Grid>
+        <Grid item xs={12} md={6}>
+          <Typography style={{fontWeight: 'bold'}} align='center' variant='h5'>
+            {value}
+          </Typography>
+          <Typography variant='h6' align='center' >
+            Paroles non traduites
+          </Typography>
+        </Grid>
+      </Grid>
+      <BarStats value={value} percent={percent} />
+    </Box>
+  )
+}
+
+TraductionsStats.propTypes = {
+  value: PropTypes.number.isRequired,
+  total: PropTypes.number.isRequired
+}