69 lines
2.1 KiB
JavaScript
69 lines
2.1 KiB
JavaScript
import {useState} from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import Card from '@mui/material/Card'
|
|
import CardContent from '@mui/material/CardContent'
|
|
import CardActionArea from '@mui/material/CardActionArea'
|
|
import Divider from '@mui/material/Divider'
|
|
import Grid from '@mui/material/Grid2'
|
|
|
|
import Typography from '@mui/material/Typography'
|
|
import {CardMedia} from '@mui/material'
|
|
|
|
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 xs={12} md={6} sx={{marginBottom: 2}}>
|
|
<Card raised>
|
|
<CardActionArea onClick={handleClickOpen}>
|
|
<CardMedia
|
|
component='img'
|
|
height='140'
|
|
image={`/captures/${img}.png`}
|
|
alt={`Aperçu ${tit}`}
|
|
/>
|
|
<CardContent>
|
|
<Typography color='primary' variant='h6' component='div'>
|
|
{tit}
|
|
</Typography>
|
|
<Typography gutterBottom variant='caption' component='div'>
|
|
{`${img}.o-k-i.net`}
|
|
</Typography>
|
|
<Typography variant='h6' component='div'>
|
|
{soutit}
|
|
</Typography>
|
|
<Typography variant='body2'>
|
|
{ko}
|
|
</Typography>
|
|
</CardContent>
|
|
</CardActionArea>
|
|
<Divider sx={{borderWidth: 1}} />
|
|
<CardActionArea onClick={() => window.open(lyen, '_blank')}>
|
|
<CardContent>
|
|
<Typography textAlign='center' color='primary' variant='h6' component='div'>
|
|
Accéder à {tit}
|
|
</Typography>
|
|
</CardContent>
|
|
</CardActionArea>
|
|
</Card>
|
|
</Grid>
|
|
<RezoImaj tit={tit} 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
|
|
}
|