From 32cf9fe0489e39799d5649bb2134a4bdd96554f4 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 22:10:52 +0400
Subject: [PATCH] Import img and add placeholder blur

---
 components/rezo-imaj.js | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/components/rezo-imaj.js b/components/rezo-imaj.js
index f715e59..55cdb14 100644
--- a/components/rezo-imaj.js
+++ b/components/rezo-imaj.js
@@ -2,9 +2,32 @@ import PropTypes from 'prop-types'
 import Backdrop from '@mui/material/Backdrop'
 import Image from 'next/image'
 import useMediaQuery from '@mui/material/useMediaQuery'
+import pale from '../public/captures/pale.png'
+import gade from '../public/captures/gade.png'
+import mobilize from '../public/captures/mobilize.png'
+import nouvel from '../public/captures/nouvel.png'
 
 export default function RezoImaj({img, open, setOpen}) {
   const isSmallDevice = useMediaQuery('(max-width:1160px)')
+  const getSource = source => {
+    if (source === 'pale') {
+      return pale
+    }
+
+    if (source === 'gade') {
+      return gade
+    }
+
+    if (source === 'mobilize') {
+      return mobilize
+    }
+
+    if (source === 'nouvel') {
+      return nouvel
+    }
+  }
+
+  const source = getSource(img)
 
   const handleClose = () => {
     setOpen(false)
@@ -19,9 +42,10 @@ export default function RezoImaj({img, open, setOpen}) {
       >
         <div style={{width: isSmallDevice ? '100%' : '70%', height: isSmallDevice ? '100%' : '70%', position: 'relative'}}>
           <Image
-            src={`/captures/${img}.png`}
+            src={source}
             layout='fill'
             objectFit='contain'
+            placeholder='blur'
           />
         </div>
       </Backdrop>