skeleton added to services

src/app/_components/services/page.tsx

@@ -1,46 +1,72 @@
-import React from "react";
+"use client";
+
+import { useEffect, useState } from "react";
+import Skeleton from "react-loading-skeleton";
+import "react-loading-skeleton/dist/skeleton.css";
 
-// تعریف یک نوع برای سرویس‌ها
 type Service = {
+  id: number; // افزودن id برای شناسایی هر سرویس
   title: string;
   description: string;
   imageSrc: string;
   altText: string;
 };
 
-// لیست سرویس‌ها به عنوان یک آرایه از آبجکت‌ها
-const services: Service[] = [
-  {
-    title: "UI/UX",
-    description:
-      "Lorem ipsum dolor sit amet consectetur. Morbi diam nisi nam diam interdum",
-    imageSrc: "/images/ui-ux-vector.svg",
-    altText: "UI/UX Vector",
-  },
-  {
-    title: "Web Design",
-    description:
-      "Lorem ipsum dolor sit amet consectetur. Morbi diam nisi nam diam interdum",
-    imageSrc: "/images/web-design-vector.svg",
-    altText: "Web Design Vector",
-  },
-  {
-    title: "App Design",
-    description:
-      "Lorem ipsum dolor sit amet consectetur. Morbi diam nisi nam diam interdum",
-    imageSrc: "/images/app-design-vector.svg",
-    altText: "App Design Vector",
-  },
-  {
-    title: "Graphic Design",
-    description:
-      "Lorem ipsum dolor sit amet consectetur. Morbi diam nisi nam diam interdum",
-    imageSrc: "/images/graphic-design-vector.svg",
-    altText: "Graphic Design Vector",
-  },
-];
-
 export default function Services() {
+  const [services, setServices] = useState<Service[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchServices = async () => {
+      try {
+        const response = await fetch("/api/services", {
+          cache: "no-store", // غیرفعال کردن کش
+        });
+
+        if (!response.ok) {
+          throw new Error("Failed to fetch services");
+        }
+
+        const data: Service[] = await response.json();
+        setServices(data);
+      } catch (err: any) {
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchServices();
+
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="flex flex-col items-center" id="services">
+        <h2 className="my-10 text-[65px] font-[600] text-black">Services</h2>
+        <p className="w-[930px] 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-[1420px] items-center justify-between gap-[30px]">
+          {Array.from({ length: 4 }).map((_, index) => (
+            <div
+              key={index}
+              className="flex flex-wrap items-center rounded-lg bg-[#F8F8F8] p-[22px] w-full"
+            >
+              <Skeleton containerClassName={"w-[100px]"} height={120} />
+              <Skeleton containerClassName={"w-full"} height={32} />
+              <Skeleton containerClassName={"w-full"} height={60} />
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (error) return <p>Error: {error}</p>;
+
   return (
     <div className="flex flex-col items-center" id="services">
       <h2 className="my-10 text-[65px] font-[600] text-black">Services</h2>
@@ -49,9 +75,9 @@ export default function Services() {
         lectus netus in. Aliquet donec morbi convallis pretium
       </p>
       <div className="service mt-20 flex w-[1420px] items-center justify-between gap-[30px]">
-        {services.map((service, index) => (
+        {services.map((service) => (
           <div
-            key={index}
+            key={service.id} // استفاده از id به عنوان کلید
             className="flex flex-wrap items-center rounded-lg bg-[#F8F8F8] p-[22px]"
           >
             <div className="my-5 w-full">
@@ -69,3 +95,6 @@ export default function Services() {
     </div>
   );
 }
+{
+  /* <Skeleton width={200} height={60} /> */
+}

src/app/api/services/route.ts

@@ -0,0 +1,11 @@
+import { NextResponse } from "next/server";
+
+export async function GET() {
+  const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/services`, {
+    cache: "no-store", // غیرفعال کردن کش
+  });
+
+  const services = await res.json();
+
+  return NextResponse.json(services);
+}