From f4bcb396aa23160fcfbfa744f33eb92dd599366e Mon Sep 17 00:00:00 2001
From: ehsan <ehsanahmadi8338@gmail.com>
Date: Sun, 28 Sep 2025 18:21:22 +0330
Subject: [PATCH] change style of images and fix show img head and insurances
 in mobile size in clinic page

---
 app/clinics/page.js                           |  9 +-
 .../clinic/components/about/ListBime.js       | 14 ++--
 .../clinic/components/about/Services.js       |  2 +-
 .../clinic/components/about/images/Images.js  | 25 +++---
 .../clinic/components/about/images/Img.js     |  2 +-
 .../clinic/components/about/images/List.js    | 83 +++++++++----------
 .../clinic/components/about/images/Slider.js  |  8 +-
 components/clinic/components/about/index.js   |  1 +
 8 files changed, 72 insertions(+), 72 deletions(-)

diff --git a/app/clinics/page.js b/app/clinics/page.js
index 9bd8161..14e379c 100644
--- a/app/clinics/page.js
+++ b/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) {
-    console.log(`Error fetching doctors: ${err}`);
-  }
+  } catch (err) {}
 
   return (
     <Layout name="/clinics">
diff --git a/components/clinic/components/about/ListBime.js b/components/clinic/components/about/ListBime.js
index 04bdbb8..fee3cf1 100644
--- a/components/clinic/components/about/ListBime.js
+++ b/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}>
-            <li
-              key={idx}
-              className="p-[16px] min-w-[156px] w-full border border-[#EFEFEF] flex flex-col items-center justify-center gap-[20px]"
-            >
-              <Image src={item.img} height={92} width={92} alt="bime" />
+          <CustomLoading key={idx} width={156} height={110}>
+            <li className="p-[16px] min-w-[156px] w-full border border-[#EFEFEF] flex flex-col items-center justify-center gap-[20px]">
+              <Image
+                src={item.logo && item.logo[0]?.url || ""}
+                height={92}
+                width={92}
+                alt="bime"
+              />
               <h3 className="text-[#525252] text-[16px] font-medium">
                 {item.name}
               </h3>
diff --git a/components/clinic/components/about/Services.js b/components/clinic/components/about/Services.js
index b32ede9..73ea949 100644
--- a/components/clinic/components/about/Services.js
+++ b/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 />
diff --git a/components/clinic/components/about/images/Images.js b/components/clinic/components/about/images/Images.js
index 6f1da5f..44f0b18 100644
--- a/components/clinic/components/about/images/Images.js
+++ b/components/clinic/components/about/images/Images.js
@@ -14,17 +14,22 @@ function Images({ data }) {
         "
     >
       <div className="w-full">
-        <CustomLoading width={600} height={400}>
-          <Image
-            className="rounded-[8px] overflow-hidden"
-            src={images_clinic[0].url || ""}
-            alt="img clinic"
-            height={432}
-            width={600}
-          />
-        </CustomLoading>
+        <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"}`}
+        >
+          <CustomLoading width={600} height={400}>
+            <Image
+              className="rounded-[8px] overflow-hidden w-full h-full object-cover"
+              src={images_clinic[0].url || ""}
+              alt="img clinic"
+              height={432}
+              width={600}
+            />
+          </CustomLoading>
+          <List data={data} />
+        </div>
       </div>
-      <List data={data} />
       <Slider data={data} />
     </div>
   );
diff --git a/components/clinic/components/about/images/Img.js b/components/clinic/components/about/images/Img.js
index e70295f..d9c4898 100644
--- a/components/clinic/components/about/images/Img.js
+++ b/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 || ""}
diff --git a/components/clinic/components/about/images/List.js b/components/clinic/components/about/images/List.js
index 3cf12ab..f6d8581 100644
--- a/components/clinic/components/about/images/List.js
+++ b/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]">
-      {images_clinic.map((img) => (
-        <div className="w-full">
-          <CustomLoading width="full" height={190}>
-            <Image
-              className="rounded-[8px] overflow-hidden"
-              src={img.url || ""}
-              alt="img clinic"
-              height={204}
-              width={288}
-            />
-          </CustomLoading>
-        </div>
-      ))}
-      <Img
-        url={
-          data?.images_clinic &&
-          !!data?.images_clinic.length &&
-          data?.images_clinic[1]
+    <div
+      className={`hidden w-full md:grid gap-[16px] lg:gap-[24px]
+        ${
+          lengthImgClinics === 1
+            ? "md:!hidden"
+            : lengthImgClinics === 2
+              ? "grid-cols-1 grid-rows-1"
+              : lengthImgClinics === 3
+                ? "grid-cols-1 grid-rows-2"
+                : lengthImgClinics === 4
+                  ? "grid-cols-2 grid-rows-2"
+                  : ""
         }
-      />
-      <Img
-        url={
-          data?.images_clinic &&
-          !!data?.images_clinic.length &&
-          data?.images_clinic[2]
-        }
-      />
-      <Img
-        url={
-          data?.images_clinic &&
-          !!data?.images_clinic.length &&
-          data?.images_clinic[3]
-        }
-      />
-      <Img
-        url={
-          data?.images_clinic &&
-          !!data?.images_clinic.length &&
-          data?.images_clinic[4]
-        }
-      />
+      `}
+    >
+      {images_clinic.map((img, idx) =>
+        idx !== 0 ? (
+          <div
+            key={idx}
+            className={`${
+              lengthImgClinics === 3
+                ? "h-full"
+                : lengthImgClinics === 4
+                  ? idx === lengthImgClinics - 1
+                    ? "w-[calc(200%+16px)] lg:w-[calc(200%+24px)]"
+                    : "w-full h-full"
+                  : "h-full w-full"
+            }`}
+          >
+            <CustomLoading width="full" height={190}>
+              <Image
+                className="rounded-[8px] overflow-hidden w-full h-full object-cover"
+                src={img.url || ""}
+                alt="img clinic"
+                height={204}
+                width={288}
+              />
+            </CustomLoading>
+          </div>
+        ) : undefined
+      )}
     </div>
   );
 }
diff --git a/components/clinic/components/about/images/Slider.js b/components/clinic/components/about/images/Slider.js
index 9ce4cf3..9858276 100644
--- a/components/clinic/components/about/images/Slider.js
+++ b/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}
+                src={item.url}
                 width={90}
                 height={90}
                 alt="image clinic"
diff --git a/components/clinic/components/about/index.js b/components/clinic/components/about/index.js
index 3327405..f26ba41 100644
--- a/components/clinic/components/about/index.js
+++ b/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">