feat(clinic): improve image handling and map integration in clinic components

components/clinic/components/about/images/Images.js

@@ -2,9 +2,10 @@ import List from "./List";
 import Slider from "./Slider";
 import Image from "next/image";
 import CustomLoading from "@/app/component/loading/Custom";
+import { imageUrl } from "@/helper";
 
 function Images({ data }) {
-  const images_clinic = data.images_clinic;
+  const images_clinic = data?.images_clinic || [];
 
   return (
     <div
@@ -16,12 +17,12 @@ function Images({ data }) {
       <div className="w-full">
         <div
           className={`grid grid-cols-1 grid-rows-1 gap-[12px] md:gap-[18px] lg:gap-[24px] h-[290px] max-h-[290px]
-          ${data.images_clinic.length === 1 ? "md:grid-cols-1 h-[350px] max-h-[350px]" : "md:grid-cols-2"}`}
+          ${images_clinic.length === 1 ? "md:grid-cols-1 h-[350px] max-h-[350px]" : "md:grid-cols-2"}`}
         >
           <CustomLoading width={600} height={400}>
             <Image
               className="rounded-[8px] overflow-hidden w-full h-full object-cover"
-              src={images_clinic[0]?.url || "/assets/images/clinic-img.png"}
+              src={imageUrl(images_clinic[0]?.url, "/assets/images/clinic-img.png")}
               alt="img clinic"
               height={432}
               width={600}

components/clinic/components/about/images/List.js

@@ -1,8 +1,9 @@
 import CustomLoading from "@/app/component/loading/Custom";
 import Image from "next/image";
+import { imageUrl } from "@/helper";
 
 function List({ data }) {
-  const images_clinic = data.images_clinic;
+  const images_clinic = data?.images_clinic || [];
   const lengthImgClinics = images_clinic.length;
 
   return (
@@ -36,7 +37,7 @@ function List({ data }) {
             <CustomLoading width="full" height={190}>
               <Image
                 className="rounded-[8px] overflow-hidden w-full h-full object-cover"
-                src={img.url || "/assets/images/clinic-img.png"}
+                src={imageUrl(img.url, "/assets/images/clinic-img.png")}
                 alt="img clinic"
                 height={204}
                 width={288}

components/clinic/components/contact/index.js

@@ -41,7 +41,11 @@ function Contact({ data }) {
       <div className="w-full relative h-[460px] mt-[24px]">
         <CustomLoading width="full" height={400}>
           <iframe
-            src={`https://maps.google.com/maps?q=${data.map.latitude},${data.map.longitude}&z=14&output=embed`}
+            src={`https://maps.google.com/maps?q=${
+              data?.map?.latitude && data?.map?.longitude
+                ? `${data.map.latitude},${data.map.longitude}`
+                : encodeURIComponent(data?.location || data?.title || "")
+            }&z=14&output=embed`}
             className="w-full h-full rounded-lg"
             loading="lazy"
           ></iframe>