106 lines
3.2 KiB
JavaScript
106 lines
3.2 KiB
JavaScript
import Box from '@mui/material/Box'
|
|
import Typography from '@mui/material/Typography'
|
|
import Paper from '@mui/material/Paper'
|
|
import Grid from '@mui/material/Grid2'
|
|
import PropTypes from 'prop-types'
|
|
import IconButton from '@mui/material/IconButton'
|
|
import ThumbUpIcon from '@mui/icons-material/ThumbUp'
|
|
import ThumbDownIcon from '@mui/icons-material/ThumbDown'
|
|
|
|
export default function VersionComparison({versionData}) {
|
|
const {current, main, outdated} = versionData
|
|
|
|
return (
|
|
<Box sx={{padding: 3}}>
|
|
<Grid container spacing={2}>
|
|
<Grid xs={6}>
|
|
<Paper sx={{padding: 1, backgroundColor: '#E8F5E9'}}>
|
|
<Typography variant='body1' sx={{color: '#388E3C', fontWeight: 'bold'}}>
|
|
{main.contenu}
|
|
</Typography>
|
|
</Paper>
|
|
</Grid>
|
|
<Grid xs={6}>
|
|
<Paper sx={{padding: 1, backgroundColor: outdated ? '#F9E8E8' : '#E3F2FD'}}>
|
|
<Typography variant='body1' sx={{color: outdated ? '#D32F2F' : '#1976D2', fontWeight: 'bold'}}>
|
|
{current.contenu}
|
|
</Typography>
|
|
{!outdated && (
|
|
<Box sx={{display: 'flex', justifyContent: 'flex-end', mt: 1}}>
|
|
<IconButton size='small' color='success' aria-label='vote positif'>
|
|
<ThumbUpIcon />
|
|
</IconButton>
|
|
<IconButton size='small' color='error' aria-label='vote négatif'>
|
|
<ThumbDownIcon />
|
|
</IconButton>
|
|
</Box>
|
|
)}
|
|
</Paper>
|
|
</Grid>
|
|
</Grid>
|
|
|
|
<Box sx={{marginTop: 4}}>
|
|
<Typography variant='button' sx={{
|
|
fontWeight: 'bold', marginBottom: 1, textAlign: 'center', display: 'block'
|
|
}}
|
|
>
|
|
LÉGENDE
|
|
</Typography>
|
|
<Grid container textAlign='center' spacing={2}>
|
|
<Grid size={{xs: 12, sm: 4}}>
|
|
<Typography
|
|
variant='body2'
|
|
sx={{
|
|
backgroundColor: '#E8F5E9',
|
|
padding: 1,
|
|
borderRadius: 1,
|
|
color: '#388E3C',
|
|
fontWeight: 'bold'
|
|
}}
|
|
>
|
|
En ligne
|
|
</Typography>
|
|
</Grid>
|
|
<Grid size={{xs: 12, sm: 4}}>
|
|
<Typography
|
|
variant='body2'
|
|
sx={{
|
|
backgroundColor: '#E3F2FD',
|
|
padding: 1,
|
|
borderRadius: 1,
|
|
color: '#1976D2',
|
|
fontWeight: 'bold'
|
|
}}
|
|
>
|
|
En cours de révision
|
|
</Typography>
|
|
</Grid>
|
|
<Grid size={{xs: 12, sm: 4}}>
|
|
<Typography
|
|
variant='body2'
|
|
sx={{
|
|
backgroundColor: '#F9E8E8',
|
|
padding: 1,
|
|
borderRadius: 1,
|
|
color: '#D32F2F',
|
|
fontWeight: 'bold'
|
|
}}
|
|
>
|
|
Remplacée
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
</Box>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
VersionComparison.propTypes = {
|
|
versionData: PropTypes.shape({
|
|
outdated: PropTypes.bool.isRequired,
|
|
mainHash: PropTypes.string.isRequired,
|
|
current: PropTypes.object.isRequired,
|
|
main: PropTypes.object.isRequired,
|
|
}).isRequired,
|
|
}
|