Create VersionComparison & VersionDialog components

2024-11-28 07:55:32 +04:00
parent e1048d343b
commit 3134184ece
2 changed files with 191 additions and 0 deletions
@@ -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
+}