Create Stats components

components/stats/bar-stats.js

@@ -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,
+}

components/stats/kat-stats.js

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
+import TraductionsStats from './traductions-stats'
+
+export default function KatStats({emoji, value, total}) {
+  return (
+    <Card sx={{marginBottom: 2}} variant='outlined'>
+      <CardContent>
+        <Typography gutterBottom align='center' variant='h6'>
+          <span dangerouslySetInnerHTML={{__html: emoji}} />
+        </Typography>
+        <TraductionsStats value={value} total={total} />
+      </CardContent>
+    </Card>
+  )
+}
+
+KatStats.propTypes = {
+  emoji: PropTypes.string.isRequired,
+  value: PropTypes.number.isRequired,
+  total: PropTypes.number.isRequired
+}

components/stats/traductions-stats.js

@@ -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
+}