File size: 903 Bytes
4304c6d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
import type { FC } from 'react'
import { createPortal } from 'react-dom'
import { XClose } from '@/app/components/base/icons/src/vender/line/general'
type ImagePreviewProps = {
url: string
onCancel: () => void
}
const ImagePreview: FC<ImagePreviewProps> = ({
url,
onCancel,
}) => {
return createPortal(
<div className='fixed inset-0 p-8 flex items-center justify-center bg-black/80 z-[1000]' onClick={e => e.stopPropagation()}>
<img
alt='preview image'
src={url}
className='max-w-full max-h-full'
/>
<div
className='absolute top-6 right-6 flex items-center justify-center w-8 h-8 bg-white/[0.08] rounded-lg backdrop-blur-[2px] cursor-pointer'
onClick={onCancel}
>
<XClose className='w-4 h-4 text-white' />
</div>
</div>,
document.body,
)
}
export default ImagePreview
|