36 lines
1.6 KiB
JavaScript
36 lines
1.6 KiB
JavaScript
import {Box, Skeleton, Stack} from "@mui/material";
|
|
import {useEffect} from "react";
|
|
const ImageContent = (prop) => {
|
|
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
prop.setIsSkeleton(false);
|
|
}, 1500);
|
|
|
|
return () => clearTimeout(timer);
|
|
}, [prop.isSkeleton]);
|
|
|
|
const isPDF = prop.imageLink && prop.imageLink.attachment && prop.imageLink.attachment.endsWith('.pdf');
|
|
return (
|
|
<>
|
|
<Stack sx={{width :"100%"}}>
|
|
{prop.isSkeleton && (
|
|
<Box sx={{display:'flex' ,justifyContent:'center' , border: '1px solid #ccc' ,p:5 , height: '700px' , borderRadius: '8px' , width:'100%'}}>
|
|
<Skeleton variant="rectangular" animation="wave" sx={{ width: '100%', height: '100%' }} />
|
|
</Box>
|
|
)}
|
|
{isPDF ? (
|
|
<embed src={prop.imageLink.attachment} type="application/pdf" width="100%" height="700px" style={{ display: prop.isSkeleton ? 'none' : 'block' }}/>
|
|
) : (
|
|
prop.imageLink && prop.imageLink.attachment && (
|
|
<Box sx={{display: prop.isSkeleton ? 'none' : 'flex' ,justifyContent:'center' , border: '1px solid #ccc' , p:5 , height: '700px' , borderRadius: '8px',}}>
|
|
<Box component="img" src={prop.imageLink.attachment} alt="Image Preview" width="auto" height="auto" sx={{maxHeight: '700px' , maxWidth:'100%'}}></Box>
|
|
</Box>
|
|
)
|
|
)}
|
|
</Stack>
|
|
</>
|
|
)
|
|
|
|
}
|
|
export default ImageContent; |