konstitisyon.nu/components/versions/version-comparison.js

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'

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: '#388E3C'}}>
            <Typography variant='body1' sx={{color: '#fff'}}>
              {main.contenu}
            </Typography>
          </Paper>
        </Grid>
        <Grid xs={6}>
          <Paper sx={{padding: 1, backgroundColor: outdated ? '#D32F2F' : '#1976D2'}}>
            <Typography variant='body1' sx={{color: '#fff'}}>
              {current.contenu}
            </Typography>
          </Paper>
        </Grid>
      </Grid>

      <Box sx={{marginTop: 4}}>
        <Typography textAlign='center' variant='subtitle1' sx={{fontWeight: 'bold', marginBottom: 1}}>
          LÉGENDE
        </Typography>
        <Grid container spacing={1}>
          <Grid container xs={12} alignItems='center' spacing={2}>
            <Grid>
              <Paper
                sx={{
                  padding: 1,
                  backgroundColor: '#388E3C',
                  color: '#fff',
                  width: 100,
                  textAlign: 'center',
                }}
              >
                <Typography variant='body2'>
                  <strong>PUBLIÉE</strong>
                </Typography>
              </Paper>
            </Grid>
            <Grid>
              <Typography
                variant='body2'
                sx={{
                  backgroundColor: '#E8F5E9',
                  padding: 1,
                  borderRadius: 1,
                  color: '#388E3C',
                  fontWeight: 'bold'
                }}
              >
                Version actuellement en ligne.
              </Typography>
            </Grid>
          </Grid>
          <Grid container xs={12} alignItems='center' spacing={2}>
            <Grid>
              <Paper
                sx={{
                  padding: 1,
                  backgroundColor: '#1976D2',
                  color: '#fff',
                  width: 100,
                  textAlign: 'center'
                }}
              >
                <Typography variant='body2'>
                  <strong>PROPOSÉE</strong>
                </Typography>
              </Paper>
            </Grid>
            <Grid>
              <Typography
                variant='body2'
                sx={{
                  backgroundColor: '#E3F2FD',
                  padding: 1,
                  borderRadius: 1,
                  color: '#1976D2',
                  fontWeight: 'bold'
                }}
              >
                Version soumise mais pas encore publiée.
              </Typography>
            </Grid>
          </Grid>

          <Grid container xs={12} alignItems='center' spacing={2}>
            <Grid>
              <Paper
                sx={{
                  padding: 1,
                  backgroundColor: '#D32F2F',
                  color: '#fff',
                  width: 100,
                  textAlign: 'center',
                }}
              >
                <Typography variant='body2'>
                  <strong>ANCIENNE</strong>
                </Typography>
              </Paper>
            </Grid>
            <Grid>
              <Typography
                variant='body2'
                sx={{
                  backgroundColor: '#F9E8E8',
                  padding: 1,
                  borderRadius: 1,
                  color: '#D32F2F',
                  fontWeight: 'bold'
                }}
              >
                Remplacée par une version plus récente publiée.
              </Typography>
            </Grid>
          </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,
}