Create VersionComparison & VersionDialog components

components/versions/version-comparison.js

@@ -0,0 +1,141 @@
+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 item xs={6}>
+          <Paper sx={{padding: 2, backgroundColor: '#388E3C'}}>
+            <Typography variant='body1' sx={{color: '#fff'}}>
+              {main.contenu}
+            </Typography>
+          </Paper>
+        </Grid>
+        <Grid item xs={6}>
+          <Paper sx={{padding: 2, 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={2}>
+          <Grid item container xs={12} alignItems='center' spacing={2}>
+            <Grid item>
+              <Paper
+                sx={{
+                  padding: 1,
+                  backgroundColor: '#388E3C',
+                  color: '#fff',
+                  width: 100,
+                  textAlign: 'center',
+                }}
+              >
+                <Typography variant='body2'>
+                  <strong>PUBLIÉE</strong>
+                </Typography>
+              </Paper>
+            </Grid>
+            <Grid item>
+              <Typography
+                variant='body2'
+                sx={{
+                  backgroundColor: '#E8F5E9',
+                  padding: 1,
+                  borderRadius: 1,
+                  color: '#388E3C',
+                  fontWeight: 'bold'
+                }}
+              >
+                Version actuellement en ligne.
+              </Typography>
+            </Grid>
+          </Grid>
+          <Grid item container xs={12} alignItems='center' spacing={2}>
+            <Grid item>
+              <Paper
+                sx={{
+                  padding: 1,
+                  backgroundColor: '#1976D2',
+                  color: '#fff',
+                  width: 100,
+                  textAlign: 'center'
+                }}
+              >
+                <Typography variant='body2'>
+                  <strong>PROPOSÉE</strong>
+                </Typography>
+              </Paper>
+            </Grid>
+            <Grid item xs>
+              <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 item container xs={12} alignItems='center' spacing={2}>
+            <Grid item>
+              <Paper
+                sx={{
+                  padding: 1,
+                  backgroundColor: '#D32F2F',
+                  color: '#fff',
+                  width: 100,
+                  textAlign: 'center',
+                }}
+              >
+                <Typography variant='body2'>
+                  <strong>ANCIENNE</strong>
+                </Typography>
+              </Paper>
+            </Grid>
+            <Grid item>
+              <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,
+}

components/versions/version-dialog.js

@@ -0,0 +1,50 @@
+import PropTypes from 'prop-types'
+import Button from '@mui/material/Button'
+import Dialog from '@mui/material/Dialog'
+import DialogActions from '@mui/material/DialogActions'
+import DialogContent from '@mui/material/DialogContent'
+import DialogTitle from '@mui/material/DialogTitle'
+import useMediaQuery from '@mui/material/useMediaQuery'
+import {useTheme} from '@mui/material/styles'
+import VersionComparison from './version-comparison.js'
+
+export default function VersionDialog({versionData, isOpen, setIsOpen}) {
+  const theme = useTheme()
+  const fullScreen = useMediaQuery(theme.breakpoints.down('md'))
+
+  const handleClose = () => {
+    setIsOpen(false)
+  }
+
+  return (
+    <Dialog
+      fullScreen={fullScreen}
+      open={isOpen}
+      aria-labelledby='comparaison-des-versions'
+      onClose={handleClose}
+    >
+      <DialogTitle textAlign='center' id='comparaison-des-versions'>
+        {'Comparaison des versions'}
+      </DialogTitle>
+      <DialogContent>
+        <VersionComparison versionData={versionData} />
+      </DialogContent>
+      <DialogActions>
+        <Button autoFocus color='success' onClick={handleClose}>
+          Fermer
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
+
+VersionDialog.propTypes = {
+  versionData: PropTypes.shape({
+    outdated: PropTypes.bool.isRequired,
+    mainHash: PropTypes.string.isRequired,
+    current: PropTypes.object.isRequired,
+    main: PropTypes.object.isRequired
+  }).isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  setIsOpen: PropTypes.func.isRequired
+}