feat: Refactor blog components and add pagination

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

@@ -0,0 +1,58 @@
+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";
+
+interface CategoryPageProps {
+    params: Promise<{
+        slug: string;
+    }> | {
+        slug: string;
+    };
+}
+
+export default async function CategoryPage({ params }: CategoryPageProps) {
+    // Handle both Promise and direct object
+    const resolvedParams = params instanceof Promise ? await params : params;
+    const slug = resolvedParams.slug;
+
+    // Fetch category detail and blogs
+    let categoryResponse, blogsResponse;
+    try {
+        [categoryResponse, blogsResponse] = await Promise.all([
+            fetchCategoryDetail(slug),
+            fetchBlogsByCategory(slug, { page: 1, limit: 10 }),
+        ]);
+    } catch {
+        return (
+            <>
+                <Breadcrumb title="Category" current="Blog Category" />
+                <section className="news-standard-section section-padding fix">
+                    <div className="container">
+                        <div className="news-standard-wrapper">
+                            <div className="row g-4">
+                                <div className="col-lg-8 col-12">
+                                    <div className="py-5">
+                                        <h2>Category not found</h2>
+                                        <p>The category you are looking for does not exist.</p>
+                                    </div>
+                                </div>
+                                <Sidebar />
+                            </div>
+                        </div>
+                    </div>
+                </section>
+            </>
+        );
+    }
+
+    const category = categoryResponse.data;
+    const blogs = blogsResponse.data.blogs;
+
+    return (
+        <>
+            <Breadcrumb title={category.name} current="Blog Category" />
+            <NewsSection blogs={blogs} categorySlug={slug} />
+        </>
+    );
+}