Cédric FAMIBELLE-PRONZOLA
37 lines
944 B
JavaScript
37 lines
944 B
JavaScript
import PropTypes from 'prop-types'
|
|
import Backdrop from '@mui/material/Backdrop'
|
|
import Image from 'next/image'
|
|
import useMediaQuery from '@mui/material/useMediaQuery'
|
|
|
|
export default function RezoImaj({img, open, setOpen}) {
|
|
const isSmallDevice = useMediaQuery('(max-width:1160px)')
|
|
|
|
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={`/captures/${img}.png`}
|
|
layout='fill'
|
|
objectFit='contain'
|
|
/>
|
|
</div>
|
|
</Backdrop>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
RezoImaj.propTypes = {
|
|
img: PropTypes.string.isRequired,
|
|
open: PropTypes.bool.isRequired,
|
|
setOpen: PropTypes.func.isRequired
|
|
}
|