Files
pawol.nu/components/stats/traductions-stats.js
T
Cédric FAMIBELLE-PRONZOLA 50548db9ea Create Stats components
2022-05-25 06:39:09 +04:00

41 lines
1.2 KiB
JavaScript

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
}