Improve KatRezoNou component

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