refactor: implement blog fetching and pagination in BlogsPage component

components/blogs/latestArticles/Article.js

@@ -2,16 +2,20 @@ import CustomLoading from "@/app/component/loading/Custom";
 import TextLoading from "@/app/component/loading/Text";
 import Image from "next/image";
 import Link from "next/link";
+import { convertTimestampToJalali } from "@/helper";
 
 function Article({ data }) {
+  const imageSrc = data.images?.[0]?.url || "/assets/images/default-blog.jpg";
+  const createdDate = data.created ? convertTimestampToJalali(data.created) : "";
+
   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}>
         <Link href={`/blog/${data.uuid}`}>
           <Image
-            className="w-full"
-            alt="article-img"
-            src={data.src}
+            className="w-full h-[217px] object-cover"
+            alt={data.title || "article-img"}
+            src={imageSrc}
             height={217}
             width={392}
           />
@@ -20,22 +24,24 @@ function Article({ data }) {
       <div className="p-[12px] md:p-[14px] lg:p-[16px]">
         <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">
+            <h1 className="text-[#3B3B3B] mb-[12px] md:mb-[14px] lg:mb-[16px] text-[16px] font-bold line-clamp-2">
               {data.title}
             </h1>
           </Link>
         </TextLoading>
-        <div className="flex items-center justify-start gap-[35px]">
+        <div className="flex items-center justify-start gap-[16px]">
           <TextLoading width={100} height={18}>
             <p className="text-[#9B9B9B] text-[14px] font-medium">
-              تاریخ انتشار: {data.date_of_release}
-            </p>
-          </TextLoading>
-          <TextLoading width={110} height={18}>
-            <p className="text-[#9B9B9B] text-[14px] font-medium">
-              زمان مطالعه: {data.time}
+              {data.author && `نویسنده: ${data.author}`}
             </p>
           </TextLoading>
+          {createdDate && (
+            <TextLoading width={110} height={18}>
+              <p className="text-[#9B9B9B] text-[14px] font-medium">
+                {createdDate}
+              </p>
+            </TextLoading>
+          )}
         </div>
       </div>
     </li>