Modal

Usage

Click on image to open Modal

import Image from 'next/image'
				
import { Figure, Modal } from '@/ui'

interface DataProps {
	name: string
	src: string
}

const [img, setImg] = useState<DataProps>({
	name: 'Beagle',
	src: 'https://images.dog.ceo/breeds/beagle/n02088364_6866.jpg',
})

const [modal, setModal] = useState(false)

const handleClick = () => {
	setModal(true)
	document.body.style.overflow = 'hidden'
}

const closeModal = () => {
	setModal(false)
	document.body.style.overflow = ''
}
     
<Figure
	caption='Beagle'
	className='max-w-sm m-auto'
>
	<Image
		fill
		src='https://images.dog.ceo/breeds/beagle/n02088364_6866.jpg'
		title='Beagle'
		alt='Beagle'
		className='click'
		onClick={handleClick}
	/>
</Figure>

{modal && (
	<Modal
		data={img}
		onClick={closeModal}
	/>
)}