feat: Implement blog API service and refactor components for improved data fetching

This commit is contained in:
Wini_Fy
2026-02-04 15:33:02 +07:00
parent d46c420aaf
commit 9a71d39ebf
16 changed files with 790 additions and 149 deletions

View File

@@ -18,6 +18,12 @@ export default function NewsSection({
searchQuery,
pagination,
}: NewsSectionProps) {
const basePath = categorySlug
? `/blog/category/${categorySlug}`
: tagSlug
? `/blog/tag/${tagSlug}`
: "/blog";
return (
<section className="news-standard-section section-padding fix">
<div className="container">
@@ -29,7 +35,7 @@ export default function NewsSection({
{pagination && pagination.total > 1 && (
<div className="row g-4 mt-4">
<div className="col-12">
<Pagination basePath="/blog" pagination={pagination} searchQuery={searchQuery} />
<Pagination basePath={basePath} pagination={pagination} searchQuery={searchQuery} />
</div>
</div>
)}

View File

@@ -38,11 +38,11 @@ export default function Pagination({ basePath, pagination, searchQuery }: Pagina
return (
<nav aria-label="Blog pagination" className="mt-4">
<ul className="pagination justify-content-center">
<ul className="pagination justify-content-center hai-pagination">
{current > 1 && (
<li className="page-item">
<Link className="page-link" href={makeHref(current - 1)}>
Previous
<Link className="page-link" href={makeHref(current - 1)} aria-label="Previous page">
<i className="fa-solid fa-arrow-left" aria-hidden="true"></i>
</Link>
</li>
)}
@@ -67,8 +67,8 @@ export default function Pagination({ basePath, pagination, searchQuery }: Pagina
{current < total && (
<li className="page-item">
<Link className="page-link" href={makeHref(current + 1)}>
Next
<Link className="page-link" href={makeHref(current + 1)} aria-label="Next page">
<i className="fa-solid fa-arrow-right" aria-hidden="true"></i>
</Link>
</li>
)}

View File

@@ -1,5 +1,6 @@
import Link from "next/link";
import { fetchCategories, fetchRecentBlogs, fetchPopularTags } from "@/api/blog";
import { fetchCategories, fetchRecentBlogs, fetchPopularTags } from "@/api/blogsApi";
import { getCmsImageUrl } from "@/utils";
interface SidebarProps {
searchQuery?: string;
@@ -67,11 +68,8 @@ export default async function Sidebar({ searchQuery }: SidebarProps) {
<div key={post.slug} className="recent-items">
<div className="recent-thumb">
<img
src={post.thumbnail || "/assets/img/inner-page/news-details/details-1.jpg"}
src={getCmsImageUrl(post.thumbnail) || "/assets/img/inner-page/news-details/details-1.jpg"}
alt={post.title}
width={88}
height={80}
style={{ objectFit: 'cover' }}
/>
</div>
<div className="recent-content">