activity empty emages

components/admin/ActivityDetailGallaryModal.js

-import { Modal } from "antd"
+import { Empty, Modal } from "antd"
 import Image from "next/image"
 import Image from "next/image"
-import {cleanImage} from '../../services/imageHandling.js' 
+import { cleanImage } from '../../services/imageHandling.js'
 const ActivityDetailGallaryModal = ({ activityDetailInfo }) => {
 const ActivityDetailGallaryModal = ({ activityDetailInfo }) => {
     return (
     return (
+        <>
+
+            {activityDetailInfo[0].attributes.imagesComponent.length > 0 ?
+
                 <div className="p-4">
                 <div className="p-4">
                     <div className="row">
                     <div className="row">
-                {activityDetailInfo[0].attributes.imagesComponent.map((data, index)=>(
+                        {activityDetailInfo[0].attributes.imagesComponent.map((data, index) => (
                             <div className="col-4" key={index}>
                             <div className="col-4" key={index}>
-                        <Image className="img-fluid" height={400} width={400}  alt="" src={cleanImage(data.image.data.attributes)}/>
+                                <Image className="img-fluid" height={400} width={400} alt="" src={cleanImage(data.image.data.attributes)} />
                             </div>
                             </div>
                         ))}
                         ))}
                     </div>
                     </div>
                 </div>
                 </div>
+                :
+                <div className="d-flex align-items-center justify-content-center" style={{height : '60vh'}}>
+                    <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+                </div>
+            }
+        </>
     )
     )
 }
 }