41 lines
1.2 KiB
JavaScript
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
|
|
}
|