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

app/blog/category/[slug]/page.tsx

@@ -1,27 +1,39 @@
 import Breadcrumb from "@/app/components/Breadcrumb";
 import NewsSection from "@/app/blog/components/NewsSection";
 import Sidebar from "@/app/blog/components/Sidebar";
-import { fetchBlogsByCategory, fetchCategoryDetail } from "@/api/blog";
+import { fetchBlogsByCategory, fetchCategoryDetail } from "@/api/blogsApi";
 
 interface CategoryPageProps {
-    params: Promise<{
+  params:
+    | Promise<{
         slug: string;
-    }> | {
+      }>
+    | {
         slug: string;
-    };
+      };
+  searchParams?: Promise<{ search?: string; page?: string }> | { search?: string; page?: string };
 }
 
-export default async function CategoryPage({ params }: CategoryPageProps) {
+export default async function CategoryPage({ params, searchParams }: CategoryPageProps) {
     // Handle both Promise and direct object
     const resolvedParams = params instanceof Promise ? await params : params;
     const slug = resolvedParams.slug;
+    const resolvedSearchParams =
+      searchParams instanceof Promise ? await searchParams : searchParams;
+    const searchQuery = resolvedSearchParams?.search?.toString() || "";
+    const pageParam = resolvedSearchParams?.page?.toString() || "1";
+    const currentPage = Number.parseInt(pageParam, 10) || 1;
 
     // Fetch category detail and blogs
     let categoryResponse, blogsResponse;
     try {
         [categoryResponse, blogsResponse] = await Promise.all([
             fetchCategoryDetail(slug),
-            fetchBlogsByCategory(slug, { page: 1, limit: 10 }),
+            fetchBlogsByCategory(slug, {
+              page: currentPage,
+              limit: 3,
+              ...(searchQuery ? { search: searchQuery } : {}),
+            }),
         ]);
     } catch {
         return (
@@ -47,12 +59,17 @@ export default async function CategoryPage({ params }: CategoryPageProps) {
     }
 
     const category = categoryResponse.data;
-    const blogs = blogsResponse.data.blogs;
+    const { blogs, pagination } = blogsResponse.data;
 
     return (
         <>
             <Breadcrumb title={category.name} current="Blog Category" />
-            <NewsSection blogs={blogs} categorySlug={slug} />
+            <NewsSection
+              blogs={blogs}
+              categorySlug={slug}
+              searchQuery={searchQuery}
+              pagination={pagination}
+            />
         </>
     );
 }