Ayobami
56 lines
2.2 KiB
React
56 lines
2.2 KiB
React
|
|
|
|
import React from "react";
|
|
|
|
const ImagePreviewModal = ({ file, handleFileUpload, cancelFileUpload }) => {
|
|
const [imageSrc, setImageSrc] = React.useState()
|
|
|
|
React.useEffect(() => {
|
|
if (file.length > 0) {
|
|
setImageSrc(URL.createObjectURL(file[0]))
|
|
}
|
|
}, [file])
|
|
|
|
|
|
return (
|
|
<>
|
|
<div className="fixed inset-0 z-10 overflow-y-auto">
|
|
<div
|
|
className="fixed inset-0 w-full h-full bg-black opacity-40"
|
|
onClick={cancelFileUpload}
|
|
></div>
|
|
<div className="flex items-center min-h-screen px-4 py-8">
|
|
<div className="relative w-full max-w-lg p-4 mx-auto bg-white rounded-md shadow-lg">
|
|
<div className="mt-3 sm:flex">
|
|
<div className="mt-2 text-center sm:ml-4 sm:text-left">
|
|
<h4 className="text-lg font-medium text-gray-800">
|
|
Send Image{file.length > 1 && 's'}
|
|
</h4>
|
|
<img className="block" src={imageSrc} />
|
|
<div className="items-center gap-2 mt-3 sm:flex">
|
|
<button
|
|
className="w-full mt-2 p-2.5 flex-1 mr-4 text-white bg-blue-600 whitespace-nowrap rounded-md outline-none ring-offset-2 ring-blue-600 focus:ring-2"
|
|
onClick={handleFileUpload}
|
|
>
|
|
Send Message
|
|
</button>
|
|
<button
|
|
className="w-full mt-2 p-2.5 flex-1 text-gray-800 rounded-md outline-none border ring-offset-2 ring-indigo-600 focus:ring-2"
|
|
onClick={cancelFileUpload}
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default ImagePreviewModal
|
|
|
|
|