diff --git a/components/versions/version-comparison.js b/components/versions/version-comparison.js
new file mode 100644
index 0000000..7c946f8
--- /dev/null
+++ b/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 (
+
+
+
+
+
+ {main.contenu}
+
+
+
+
+
+
+ {current.contenu}
+
+
+
+
+
+
+
+ LÉGENDE
+
+
+
+
+
+
+ PUBLIÉE
+
+
+
+
+
+ Version actuellement en ligne.
+
+
+
+
+
+
+
+ PROPOSÉE
+
+
+
+
+
+ Version soumise mais pas encore publiée.
+
+
+
+
+
+
+
+
+ ANCIENNE
+
+
+
+
+
+ Remplacée par une version plus récente publiée.
+
+
+
+
+
+
+ )
+}
+
+VersionComparison.propTypes = {
+ versionData: PropTypes.shape({
+ outdated: PropTypes.bool.isRequired,
+ mainHash: PropTypes.string.isRequired,
+ current: PropTypes.object.isRequired,
+ main: PropTypes.object.isRequired,
+ }).isRequired,
+}
diff --git a/components/versions/version-dialog.js b/components/versions/version-dialog.js
new file mode 100644
index 0000000..9b47f38
--- /dev/null
+++ b/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 (
+
+ )
+}
+
+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
+}