Cédric FAMIBELLE-PRONZOLA
61 lines
1.8 KiB
JavaScript
61 lines
1.8 KiB
JavaScript
import {useState} from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import Card from '@mui/material/Card'
|
|
import CardContent from '@mui/material/CardContent'
|
|
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)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<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}
|
|
</Typography>
|
|
<Typography variant='h6' component='div'>
|
|
{soutit}
|
|
</Typography>
|
|
<Typography variant='body2'>
|
|
{ko}
|
|
</Typography>
|
|
</CardContent>
|
|
<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
|
|
}
|