refactor: implement blog fetching and pagination in BlogsPage component

components/blogs/latestArticles/index.js

@@ -1,20 +1,38 @@
 import Article from "./Article";
 import Pagination from "@/app/component/Pagination";
 
-function LatestArticles({ blogs }) {
+function LatestArticles({ blogs, page, totalPages, onPageChange, isLoading }) {
   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]">
-        {blogs.map((item) => (
-          <Article data={item} key={item.uuid} />
-        ))}
-      </ul>
-      <div className="mt-[56px] flex justify-center">
-        <Pagination list={blogs} itemsPerPage={12} />
-      </div>
+      {isLoading ? (
+        <div className="flex justify-center items-center min-h-[400px]">
+          <p className="text-[#9B9B9B] text-[16px]">در حال بارگذاری...</p>
+        </div>
+      ) : blogs && blogs.length > 0 ? (
+        <>
+          <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[16px] md:gap-[20px] lg:gap-[24px]">
+            {blogs.map((item) => (
+              <Article data={item} key={item.uuid} />
+            ))}
+          </ul>
+          {totalPages > 1 && (
+            <div className="mt-[56px] flex justify-center">
+              <Pagination
+                page={page}
+                totalPages={totalPages}
+                onPageChange={onPageChange}
+              />
+            </div>
+          )}
+        </>
+      ) : (
+        <div className="flex justify-center items-center min-h-[400px]">
+          <p className="text-[#9B9B9B] text-[16px]">مقاله‌ای یافت نشد</p>
+        </div>
+      )}
     </div>
   );
 }