change data blog item and clinic item & change pages clinic and clinic to ssr & remove loading & handle pagination page clinics

components/blogs/latestArticles/Article.js

@@ -3,11 +3,11 @@ import TextLoading from "@/app/component/loading/Text";
 import Image from "next/image";
 import Link from "next/link";
 
-function Article({ data, loading }) {
+function Article({ data }) {
   return (
     <li className="rounded-[8px] overflow-hidden bg-[#FFF] shadow-[0px_0px_41px_0px_rgba(173,_181,_189,_0.15)]">
-      <CustomLoading width="full" height={200} loading={loading}>
-        <Link href={`/blog/${data.id}`}>
+      <CustomLoading width="full" height={200}>
+        <Link href={`/blog/${data.uuid}`}>
           <Image
             className="w-full"
             alt="article-img"
@@ -18,22 +18,20 @@ function Article({ data, loading }) {
         </Link>
       </CustomLoading>
       <div className="p-[12px] md:p-[14px] lg:p-[16px]">
-        <div className={loading ? "mb-[12px] md:mb-[14px] lg:mb-[16px]" : ""}>
-          <TextLoading width={150} height={18} loading={loading}>
-            <Link href={`/blog/${data.id}`}>
-              <h1 className="text-[#3B3B3B] mb-[12px] md:mb-[14px] lg:mb-[16px] text-[16px] font-bold">
-                {data.title}
-              </h1>
-            </Link>
-          </TextLoading>
-        </div>
+        <TextLoading width={150} height={18}>
+          <Link href={`/blog/${data.uuid}`}>
+            <h1 className="text-[#3B3B3B] mb-[12px] md:mb-[14px] lg:mb-[16px] text-[16px] font-bold">
+              {data.title}
+            </h1>
+          </Link>
+        </TextLoading>
         <div className="flex items-center justify-start gap-[35px]">
-          <TextLoading width={100} height={18} loading={loading}>
+          <TextLoading width={100} height={18}>
             <p className="text-[#9B9B9B] text-[14px] font-medium">
               تاریخ انتشار: {data.date_of_release}
             </p>
           </TextLoading>
-          <TextLoading width={110} height={18} loading={loading}>
+          <TextLoading width={110} height={18}>
             <p className="text-[#9B9B9B] text-[14px] font-medium">
               زمان مطالعه: {data.time}
             </p>

components/blogs/latestArticles/index.js

@@ -1,20 +1,19 @@
-import articles from "@/data/articles.json";
 import Article from "./Article";
 import Pagination from "@/app/component/Pagination";
 
-function LatestArticles({ loading }) {
+function LatestArticles({ blogs }) {
   return (
     <div>
       <p className="text-[#3B3B3B] text-[20px] font-bold my-[16px] md:my-[20px] lg:my-[24px]">
         جدیدترین مقاله ها
       </p>
       <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[16px] md:gap-[20px] lg:gap-[24px]">
-        {articles.map((item) => (
-          <Article data={item} key={item.id} loading={loading} />
+        {blogs.map((item) => (
+          <Article data={item} key={item.uuid} />
         ))}
       </ul>
       <div className="mt-[56px] flex justify-center">
-        <Pagination />
+        <Pagination list={blogs} itemsPerPage={12} />
       </div>
     </div>
   );