Cédric FAMIBELLE-PRONZOLA
63 lines
1.5 KiB
JavaScript
63 lines
1.5 KiB
JavaScript
import PropTypes from 'prop-types'
|
|
import Backdrop from '@mui/material/Backdrop'
|
|
import Image from 'next/image'
|
|
import useMediaQuery from '@mui/material/useMediaQuery'
|
|
import pale from '../public/captures/pale.png'
|
|
import gade from '../public/captures/gade.png'
|
|
import mobilize from '../public/captures/mobilize.png'
|
|
import mizik from '../public/captures/mizik.png'
|
|
|
|
export default function RezoImaj({tit, img, open, setOpen}) {
|
|
const isSmallDevice = useMediaQuery('(max-width:1160px)')
|
|
const getSource = source => {
|
|
if (source === 'pale') {
|
|
return pale
|
|
}
|
|
|
|
if (source === 'gade') {
|
|
return gade
|
|
}
|
|
|
|
if (source === 'mobilize') {
|
|
return mobilize
|
|
}
|
|
|
|
if (source === 'mizik') {
|
|
return mizik
|
|
}
|
|
}
|
|
|
|
const source = getSource(img)
|
|
|
|
const handleClose = () => {
|
|
setOpen(false)
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<Backdrop
|
|
sx={{color: '#fff', zIndex: theme => theme.zIndex.drawer + 1}}
|
|
open={open}
|
|
onClick={handleClose}
|
|
>
|
|
<div style={{width: isSmallDevice ? '100%' : '70%', height: isSmallDevice ? '100%' : '70%', position: 'relative'}}>
|
|
<Image
|
|
src={source}
|
|
alt={`Aperçu ${tit}`}
|
|
layout='fill'
|
|
objectFit='contain'
|
|
placeholder='blur'
|
|
/>
|
|
</div>
|
|
</Backdrop>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
RezoImaj.propTypes = {
|
|
img: PropTypes.string.isRequired,
|
|
tit: PropTypes.string.isRequired,
|
|
open: PropTypes.bool.isRequired,
|
|
setOpen: PropTypes.func.isRequired
|
|
}
|