From f6a3082ac8e387cda03d2d1015235b88f5cf0cd4 Mon Sep 17 00:00:00 2001
From: hamed <15238-genius.ha@users.noreply.drupalcode.org>
Date: Fri, 19 Jun 2026 01:18:28 +0330
Subject: [PATCH] feat(clinic): simplify image rendering logic and improve
 layout handling in List component

---
 .../clinic/components/about/images/List.js    | 51 +++++++------------
 1 file changed, 19 insertions(+), 32 deletions(-)

diff --git a/components/clinic/components/about/images/List.js b/components/clinic/components/about/images/List.js
index 5d4f7ec..79655a7 100644
--- a/components/clinic/components/about/images/List.js
+++ b/components/clinic/components/about/images/List.js
@@ -6,46 +6,33 @@ function List({ data }) {
   const images_clinic = data?.images_clinic || [];
   const lengthImgClinics = images_clinic.length;
 
+  // عکس اول به‌صورت بزرگ در Images.js نمایش داده می‌شود؛ اینجا بقیه‌ی عکس‌ها را نشان می‌دهیم.
+  const rest = images_clinic.slice(1);
+
   return (
     <div
       className={`hidden w-full md:grid gap-[16px] lg:gap-[24px]
-        ${lengthImgClinics === 1
+        ${rest.length === 0
           ? "md:!hidden"
-          : lengthImgClinics === 2
+          : rest.length === 1
             ? "grid-cols-1 grid-rows-1"
-            : lengthImgClinics === 3
-              ? "grid-cols-1 grid-rows-2"
-              : lengthImgClinics === 4
-                ? "grid-cols-2 grid-rows-2"
-                : ""
+            : "grid-cols-2 auto-rows-fr"
         }
       `}
     >
-      {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={imageUrl(img.url, "/assets/images/clinic-img.png")}
-                alt="img clinic"
-                height={204}
-                width={288}
-              />
-            </CustomLoading>
-          </div>
-        ) : undefined
-      )}
+      {rest.map((img, idx) => (
+        <div key={idx} className="h-full w-full">
+          <CustomLoading width="full" height={190}>
+            <Image
+              className="rounded-[8px] overflow-hidden w-full h-full object-cover"
+              src={imageUrl(img.url, "/assets/images/clinic-img.png")}
+              alt="img clinic"
+              height={204}
+              width={288}
+            />
+          </CustomLoading>
+        </div>
+      ))}
     </div>
   );
 }