change style of images and fix show img head and insurances in mobile size in clinic page

app/clinics/page.js

@@ -24,24 +24,17 @@ export default async function Clinics({ searchParams }) {
     else if (matchedCity && matchedCity.id !== "600")
       newSearchParams.city = matchedCity.name;
 
-    console.log("newSearchParams");
-    console.log(newSearchParams);
-
     const params = {
       ...buildClinicParams(newSearchParams),
       page: 1,
       limit: 12,
     };
-    console.log("params");
-    console.log(params);
 
     // Req
     clinics = await fetchReq(`${API_URL}/api/v1/clinics`, {
       params,
     });
-  } catch (err) {
+  } catch (err) {}
-    console.log(`Error fetching doctors: ${err}`);
-  }
 
   return (
     <Layout name="/clinics">

components/clinic/components/about/ListBime.js

@@ -28,12 +28,14 @@ function ListBime({ data }) {
         className="flex overflow-auto hidden-scroll mt-[8px] items-center justify-start xl:justify-center gap-[8px] sm:gap-[13px] md:gap-[19px] lg:gap-[24px]"
       >
         {data?.list_bime?.map((item, idx) => (
-          <CustomLoading width={156} height={110}>
+          <CustomLoading key={idx} width={156} height={110}>
-            <li
+            <li className="p-[16px] min-w-[156px] w-full border border-[#EFEFEF] flex flex-col items-center justify-center gap-[20px]">
-              key={idx}
+              <Image
-              className="p-[16px] min-w-[156px] w-full border border-[#EFEFEF] flex flex-col items-center justify-center gap-[20px]"
+                src={item.logo && item.logo[0]?.url || ""}
-            >
+                height={92}
-              <Image src={item.img} height={92} width={92} alt="bime" />
+                width={92}
+                alt="bime"
+              />
               <h3 className="text-[#525252] text-[16px] font-medium">
                 {item.name}
               </h3>

components/clinic/components/about/Services.js

@@ -9,7 +9,7 @@ function Services({ data }) {
     gap-x-[40px] sm:gap-x-[48px] md:gap-x-[56px] lg:gap-x-[64px] 
     gap-y-[24px] sm:gap-y-[30px] md:gap-y-[35px] lg:gap-y-[40px]"
     >
-      {data?.specialties?.map((item, idx) => (
+      {data?.services?.map((item, idx) => (
         <li key={idx} className="flex items-start justify-start gap-2">
           <div className="min-w-[24px] min-h-[24px]">
             <TickCircleOrange />

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

@@ -14,17 +14,22 @@ function Images({ data }) {
         "
     >
       <div className="w-full">
-        <CustomLoading width={600} height={400}>
+        <div
-          <Image
+          className={`grid grid-cols-1 grid-rows-1 gap-[12px] md:gap-[18px] lg:gap-[24px] h-[290px] max-h-[290px]
-            className="rounded-[8px] overflow-hidden"
+          ${data.images_clinic.length === 1 ? "md:grid-cols-1 h-[350px] max-h-[350px]" : "md:grid-cols-2"}`}
-            src={images_clinic[0].url || ""}
+        >
-            alt="img clinic"
+          <CustomLoading width={600} height={400}>
-            height={432}
+            <Image
-            width={600}
+              className="rounded-[8px] overflow-hidden w-full h-full object-cover"
-          />
+              src={images_clinic[0].url || ""}
-        </CustomLoading>
+              alt="img clinic"
+              height={432}
+              width={600}
+            />
+          </CustomLoading>
+          <List data={data} />
+        </div>
       </div>
-      <List data={data} />
       <Slider data={data} />
     </div>
   );

components/clinic/components/about/images/Img.js

@@ -5,7 +5,7 @@ import React from "react";
 function Img({ url }) {
   return (
     <div className="w-full">
-      <CustomLoading width="full" height={190}>
+      <CustomLoading loading={true} width="full" height={190}>
         <Image
           className="rounded-[8px] overflow-hidden"
           src={url || ""}

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

@@ -1,53 +1,52 @@
 import CustomLoading from "@/app/component/loading/Custom";
 import Image from "next/image";
-import Img from "./Img";
 
 function List({ data }) {
   const images_clinic = data.images_clinic;
+  const lengthImgClinics = images_clinic.length;
 
   return (
-    <div className="hidden w-full md:grid grid-cols-2 gap-[16px] lg:gap-[24px]">
+    <div
-      {images_clinic.map((img) => (
+      className={`hidden w-full md:grid gap-[16px] lg:gap-[24px]
-        <div className="w-full">
+        ${
-          <CustomLoading width="full" height={190}>
+          lengthImgClinics === 1
-            <Image
+            ? "md:!hidden"
-              className="rounded-[8px] overflow-hidden"
+            : lengthImgClinics === 2
-              src={img.url || ""}
+              ? "grid-cols-1 grid-rows-1"
-              alt="img clinic"
+              : lengthImgClinics === 3
-              height={204}
+                ? "grid-cols-1 grid-rows-2"
-              width={288}
+                : lengthImgClinics === 4
-            />
+                  ? "grid-cols-2 grid-rows-2"
-          </CustomLoading>
+                  : ""
-        </div>
-      ))}
-      <Img
-        url={
-          data?.images_clinic &&
-          !!data?.images_clinic.length &&
-          data?.images_clinic[1]
         }
-      />
+      `}
-      <Img
+    >
-        url={
+      {images_clinic.map((img, idx) =>
-          data?.images_clinic &&
+        idx !== 0 ? (
-          !!data?.images_clinic.length &&
+          <div
-          data?.images_clinic[2]
+            key={idx}
-        }
+            className={`${
-      />
+              lengthImgClinics === 3
-      <Img
+                ? "h-full"
-        url={
+                : lengthImgClinics === 4
-          data?.images_clinic &&
+                  ? idx === lengthImgClinics - 1
-          !!data?.images_clinic.length &&
+                    ? "w-[calc(200%+16px)] lg:w-[calc(200%+24px)]"
-          data?.images_clinic[3]
+                    : "w-full h-full"
-        }
+                  : "h-full w-full"
-      />
+            }`}
-      <Img
+          >
-        url={
+            <CustomLoading width="full" height={190}>
-          data?.images_clinic &&
+              <Image
-          !!data?.images_clinic.length &&
+                className="rounded-[8px] overflow-hidden w-full h-full object-cover"
-          data?.images_clinic[4]
+                src={img.url || ""}
-        }
+                alt="img clinic"
-      />
+                height={204}
+                width={288}
+              />
+            </CustomLoading>
+          </div>
+        ) : undefined
+      )}
     </div>
   );
 }

components/clinic/components/about/images/Slider.js

@@ -6,12 +6,12 @@ function Slider({ data }) {
     <ul className="flex md:hidden gap-2 w-full justify-start items-center overflow-auto hidden-scroll">
       {data &&
         data.images_clinic &&
-        [...data?.images_clinic, ...data?.images_clinic]?.map((item, idx) =>
+        data.images_clinic.length &&
+        data.images_clinic.map((item, idx) =>
           idx !== 0 ? (
-            <CustomLoading width={90} height={90}>
+            <CustomLoading key={idx} width={90} height={90}>
               <Image
-                key={idx}
+                src={item.url}
-                src={item}
                 width={90}
                 height={90}
                 alt="image clinic"

components/clinic/components/about/index.js

@@ -10,6 +10,7 @@ import MultilineLoading from "@/app/component/loading/Multiline";
 
 function About({ data }) {
   const [isMore, setIsMore] = useState(false);
+  console.log(data);
 
   return (
     <div className="opacity-page transition-all duration-500">