hamed/nobat724_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: implement blog fetching and pagination in BlogsPage component

Browse Source
This commit is contained in:
hamed
2025-11-19 10:55:26 +03:30
parent 4651ae534d
commit 235a64c378
6 changed files with 106 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/blogs/latestArticles/Article.js
+17 -11
View File
@@ -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>
components/blogs/latestArticles/index.js
+27 -9
View File
@@ -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>
);
}