Edit and move KatRezo component

components/rezo/kat-rezo-nou.js

@@ -2,14 +2,14 @@ import {useState} from 'react'
 import PropTypes from 'prop-types'
 import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
-import Button from '@mui/material/Button'
 import CardActionArea from '@mui/material/CardActionArea'
-import CardActions from '@mui/material/CardActions'
 import Divider from '@mui/material/Divider'
 import Grid from '@mui/material/Grid'
 
 import Typography from '@mui/material/Typography'
-import RezoImaj from './rezo-imaj'
+import {CardMedia} from '@mui/material'
+
+import RezoImaj from '../rezo-imaj'
 
 export default function KatRezoNou({tit, img, soutit, ko, lyen}) {
   const [open, setOpen] = useState(false)
@@ -20,18 +20,19 @@ export default function KatRezoNou({tit, img, soutit, ko, lyen}) {
 
   return (
     <>
-      <Grid item xs={12} md={6} sx={{marginBottom: 3}}>
+      <Grid item xs={12} md={6} sx={{marginBottom: 2}}>
         <Card raised>
           <CardActionArea onClick={handleClickOpen}>
-            <Typography color='primary' sx={{margin: 1, fontSize: 16}} variant='button' component='div'>
-              <strong>Aperçu</strong>
-            </Typography>
-          </CardActionArea>
-          <Divider sx={{borderWidth: 1}} />
+            <CardMedia
+              component='img'
+              height='140'
+              image={`/captures/${img}.png`}
+              alt={`Aperçu ${tit}`}
+            />
             <CardContent>
-            <Button sx={{fontSize: 25}} onClick={() => window.open(lyen, '_blank')}>
+              <Typography color='primary' variant='h6' component='div'>
                 {tit}
-            </Button>
+              </Typography>
               <Typography variant='h6' component='div'>
                 {soutit}
               </Typography>
@@ -39,11 +40,15 @@ export default function KatRezoNou({tit, img, soutit, ko, lyen}) {
                 {ko}
               </Typography>
             </CardContent>
-          <CardActions sx={{textAlign: 'center'}}>
-            <Button variant='outlined' size='small' color='primary' onClick={() => window.open(lyen, '_blank')}>
+          </CardActionArea>
+          <Divider sx={{borderWidth: 1}} />
+          <CardActionArea onClick={() => window.open(lyen, '_blank')}>
+            <CardContent>
+              <Typography textAlign='center' color='primary' variant='h6' component='div'>
                 Accéder à {tit}
-            </Button>
-          </CardActions>
+              </Typography>
+            </CardContent>
+          </CardActionArea>
         </Card>
       </Grid>
       <RezoImaj tit={tit} img={img} open={open} setOpen={setOpen} />