From 667940475f51620038d8dc65f9637a64ee9872c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@live.fr>
Date: Tue, 8 Feb 2022 21:47:48 +0400
Subject: [PATCH] Create RezoImaj component

---
 components/rezo-imaj.js | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 components/rezo-imaj.js

diff --git a/components/rezo-imaj.js b/components/rezo-imaj.js
new file mode 100644
index 0000000..f715e59
--- /dev/null
+++ b/components/rezo-imaj.js
@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types'
+import Backdrop from '@mui/material/Backdrop'
+import Image from 'next/image'
+import useMediaQuery from '@mui/material/useMediaQuery'
+
+export default function RezoImaj({img, open, setOpen}) {
+  const isSmallDevice = useMediaQuery('(max-width:1160px)')
+
+  const handleClose = () => {
+    setOpen(false)
+  }
+
+  return (
+    <div>
+      <Backdrop
+        sx={{color: '#fff', zIndex: theme => theme.zIndex.drawer + 1}}
+        open={open}
+        onClick={handleClose}
+      >
+        <div style={{width: isSmallDevice ? '100%' : '70%', height: isSmallDevice ? '100%' : '70%', position: 'relative'}}>
+          <Image
+            src={`/captures/${img}.png`}
+            layout='fill'
+            objectFit='contain'
+          />
+        </div>
+      </Backdrop>
+    </div>
+  )
+}
+
+RezoImaj.propTypes = {
+  img: PropTypes.string.isRequired,
+  open: PropTypes.bool.isRequired,
+  setOpen: PropTypes.func.isRequired
+}