LFFE-31 passenger boss show details

src/core/components/ImageContent.jsx

@@ -0,0 +1,36 @@
+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;