From 727a603a960cebfc6d908ed15d8270268f04edc9 Mon Sep 17 00:00:00 2001
From: parsa aghaei <p.aghaei@hoshmand.local>
Date: Tue, 24 Sep 2024 14:17:23 +0330
Subject: [PATCH] services optimized

---
 src/app/_components/services/page.tsx | 85 ++++++++++++---------------
 1 file changed, 36 insertions(+), 49 deletions(-)

diff --git a/src/app/_components/services/page.tsx b/src/app/_components/services/page.tsx
index 5af75a5..8f4a17c 100644
--- a/src/app/_components/services/page.tsx
+++ b/src/app/_components/services/page.tsx
@@ -5,7 +5,7 @@ import Skeleton from "react-loading-skeleton";
 import "react-loading-skeleton/dist/skeleton.css";
 
 type Service = {
-  id: number; // افزودن id برای شناسایی هر سرویس
+  id: number;
   title: string;
   description: string;
   imageSrc: string;
@@ -21,7 +21,7 @@ export default function Services() {
     const fetchServices = async () => {
       try {
         const response = await fetch("/api/services", {
-          cache: "no-store", // غیرفعال کردن کش
+          cache: "no-store",
         });
 
         if (!response.ok) {
@@ -40,34 +40,35 @@ export default function Services() {
     fetchServices();
   }, []);
 
-  if (loading) {
-    return (
-      <div
-        className="flex w-full max-w-[90%] flex-col flex-wrap items-center"
-        id="services"
-      >
-        <h2 className="my-10 text-[65px] font-[600] text-black">Services</h2>
-        <p className="w-full text-center text-[21px] font-[400] text-black">
-          Lorem ipsum dolor sit amet consectetur. Tristique amet sed massa nibh
-          lectus netus in. Aliquet donec morbi convallis pretium
-        </p>
-        <div className="service mt-20 flex w-full flex-wrap items-start justify-between gap-10">
-          {Array.from({ length: 4 }).map((_, index) => (
-            <div
-              key={index}
-              className="flex w-[45%] flex-wrap items-center rounded-lg bg-[#F8F8F8] p-[22px] lg:w-[22%]"
-            >
-              <div className="my-5 flex w-full justify-center">
-                <Skeleton containerClassName={"w-[100px]"} height={120} />
-              </div>
-              <Skeleton containerClassName={"w-full"} height={32} />
-              <Skeleton containerClassName={"w-full"} height={60} />
-            </div>
-          ))}
-        </div>
+  // تابع برای رندر کردن کارت سرویس
+  const renderServiceCard = (service?: Service, index?: number) => (
+    <div
+      key={service?.id || index}
+      className="flex w-[45%] flex-wrap items-center rounded-lg bg-[#F8F8F8] p-[22px] lg:w-[22%]"
+    >
+      <div className="my-5 flex w-full justify-center">
+        {loading ? (
+          <Skeleton containerClassName={"w-[100px]"} height={120} />
+        ) : (
+          <img src={service!.imageSrc} alt={service!.altText} />
+        )}
       </div>
-    );
-  }
+      <h3 className="text-[24px] font-[700] text-black xl:text-[32px] w-full">
+        {loading ? (
+          <Skeleton containerClassName={"w-full"} height={32} />
+        ) : (
+          service!.title
+        )}
+      </h3>
+      <p className="text-[15px] font-[400] text-black xl:text-[20px] w-full">
+        {loading ? (
+          <Skeleton containerClassName={"w-full"} height={60} />
+        ) : (
+          service!.description
+        )}
+      </p>
+    </div>
+  );
 
   if (error) return <p>Error: {error}</p>;
 
@@ -81,27 +82,13 @@ export default function Services() {
         Lorem ipsum dolor sit amet consectetur. Tristique amet sed massa nibh
         lectus netus in. Aliquet donec morbi convallis pretium
       </p>
-      <div className="service mt-20 flex w-full flex-wrap items-start justify-between gap-10">
-        {services.map((service) => (
-          <div
-            key={service.id} // استفاده از id به عنوان کلید
-            className="flex w-[45%] flex-wrap items-center rounded-lg bg-[#F8F8F8] p-[22px] lg:w-[22%]"
-          >
-            <div className="my-5 flex w-full justify-center">
-              <img src={service.imageSrc} alt={service.altText} />
-            </div>
-            <h3 className="text-[24px] font-[700] text-black xl:text-[32px]">
-              {service.title}
-            </h3>
-            <p className="text-[15px] font-[400] text-black xl:text-[20px]">
-              {service.description}
-            </p>
-          </div>
-        ))}
+      <div className="service mt-20 flex w-full flex-wrap items-start justify-between gap-8">
+        {loading
+          ? Array.from({ length: 4 }).map((_, index) =>
+              renderServiceCard(undefined, index),
+            )
+          : services.map((service) => renderServiceCard(service))}
       </div>
     </div>
   );
 }
-{
-  /* <Skeleton width={200} height={60} /> */
-}