From f8c1e8689d5e0e3fc843f18e575520aff0808a60 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:49:02 +0400
Subject: [PATCH] Improve KatRezoNou component

---
 components/kat-rezo-nou.js | 43 ++++++++++++++++++++++++++++++--------
 1 file changed, 34 insertions(+), 9 deletions(-)

diff --git a/components/kat-rezo-nou.js b/components/kat-rezo-nou.js
index f4e3095..329dcfb 100644
--- a/components/kat-rezo-nou.js
+++ b/components/kat-rezo-nou.js
@@ -1,15 +1,33 @@
+import {useState} from 'react'
 import PropTypes from 'prop-types'
-import Box from '@mui/material/Box'
 import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
-import {CardActionArea} from '@mui/material'
+import {Button, CardActionArea, CardActions, CardMedia, Divider, Grid} from '@mui/material'
 import Typography from '@mui/material/Typography'
+import RezoImaj from './rezo-imaj'
+
+export default function KatRezoNou({tit, img, soutit, ko, lyen}) {
+  const [open, setOpen] = useState(false)
+
+  const handleClickOpen = () => {
+    setOpen(true)
+  }
 
-export default function KatRezoNou({tit, soutit, ko, lyen}) {
   return (
-    <Box sx={{minWidth: 275, marginBottom: 3}}>
-      <Card raised>
-        <CardActionArea onClick={() => window.open(lyen, '_blank')}>
+    <>
+      <Grid item xs={12} md={6} sx={{marginBottom: 3}}>
+        <Card raised>
+          <CardActionArea onClick={handleClickOpen}>
+            <CardMedia
+              sx={{objectFit: 'contain'}}
+              component='img'
+              height='150'
+              image={`/captures/${img}.png`}
+              alt={`Aperçu ${tit}`}
+              title='Cliquez pour agrandir'
+            />
+          </CardActionArea>
+          <Divider />
           <CardContent>
             <Typography color='primary' variant='button' sx={{fontSize: 25}}>
               {tit}
@@ -21,14 +39,21 @@ export default function KatRezoNou({tit, soutit, ko, lyen}) {
               {ko}
             </Typography>
           </CardContent>
-        </CardActionArea>
-      </Card>
-    </Box>
+          <CardActions sx={{textAlign: 'center'}}>
+            <Button variant='outlined' size='small' color='primary' onClick={() => window.open(lyen, '_blank')}>
+              Accéder à {tit}
+            </Button>
+          </CardActions>
+        </Card>
+      </Grid>
+      <RezoImaj img={img} open={open} setOpen={setOpen} />
+    </>
   )
 }
 
 KatRezoNou.propTypes = {
   tit: PropTypes.string.isRequired,
+  img: PropTypes.string.isRequired,
   soutit: PropTypes.string.isRequired,
   ko: PropTypes.string.isRequired,
   lyen: PropTypes.string.isRequired