fix: category page and blog card styling

src/app/(main)/category/[...path]/page.tsx

@@ -0,0 +1,74 @@
+import { BeforeFooterBlock } from "@/components/Blocks/BeforeFooter";
+import { BlogCardItemSkeleton } from "@/components/Blogs/BlogCardItem";
+import Blogs from "@/components/Blogs/Blogs";
+import HeroOther from "@/components/HeroOther";
+import { getDefaultMetadata } from "@/utils/metadata";
+import { sanitizePageNumber } from "@/utils/sanitize";
+import { Metadata } from "next";
+import { headers } from "next/headers";
+import { Suspense } from "react";
+
+export async function generateMetadata(): Promise<Metadata> {
+  const metadata = await getDefaultMetadata();
+  return metadata;
+}
+
+export default async function CategoryPage({
+  params,
+  searchParams,
+}: {
+  params?: Promise<{ path: string[] }>;
+  searchParams?: Promise<{ page?: string; s?: string }>;
+}) {
+  const path = (await params)?.path;
+  const headersList = await headers();
+  const paramsCategory = path?.[0] ?? "";
+  const paramsPage = path?.[2] ?? "";
+  const paramsSearch = (await searchParams)?.s;
+  const page = sanitizePageNumber(paramsPage);
+
+  return (
+    <>
+      <HeroOther title="Blog" />
+
+      <section className="page-section" id="blog">
+        <div className="w-full max-w-7xl mx-auto px-4 md:px-8">
+          <form action={`category/chemotherapy/page/1`} method="GET">
+            <div className="input-group">
+              <input
+                type="text"
+                name="s"
+                defaultValue={paramsSearch ?? ""}
+                placeholder="Search blog..."
+                className="input-lg input-circle form-control h-12"
+              />
+              <div className="input-group-append px-2">
+                <button className="btn btn-info text-white h-12 px-5" type="submit">
+                  Search
+                </button>
+              </div>
+            </div>
+          </form>
+        </div>
+
+        <Suspense fallback={<Loading />}>
+          <Blogs preset="categories" page={page} search={paramsSearch} />
+        </Suspense>
+      </section>
+
+      <BeforeFooterBlock />
+    </>
+  );
+}
+
+function Loading() {
+  return (
+    <div className="container position-relative">
+      <div className="row">
+        <BlogCardItemSkeleton />
+        <BlogCardItemSkeleton />
+        <BlogCardItemSkeleton />
+      </div>
+    </div>
+  );
+}

src/app/globals.css

@@ -59,6 +59,10 @@ body {
   .ext-btn-shadow-sm-primary4 {
     @apply bg-extColorPrimary4 text-white hover:text-white hover:bg-extColorPrimary6 transition-colors;
   }
+
+  .ext-btn-shadow-sm-primary8 {
+    @apply bg-extColorPrimary8 text-white hover:text-white hover:bg-extColorPrimary6 transition-colors;
+  }
 }
 
 .bg-gradient {

src/components/Blogs/Blog.tsx

@@ -5,7 +5,7 @@ import { fetchBlog } from "@/services/payload/blog";
 import { sanitizeBlogContentIntoStringPreview } from "@/utils/sanitize";
 
 export default async function Blog() {
-  const data = await fetchBlog(undefined);
+  const data = await fetchBlog();
 
   if (!data?.totalDocs) return <></>;
   return (

src/components/Blogs/BlogCardItem.tsx

@@ -31,7 +31,7 @@ export function BlogCardItem({ data }: BlogCardItemProps) {
             <a href={`/${data.slug}/`}>{data.title}</a>
           </h2>
           <div className="flex justify-center mt-2">
-            <a href={`/${data.slug}/`} className="ext-btn-shadow-sm ext-btn-shadow-sm-primary4">
+            <a href={`/${data.slug}/`} className="ext-btn-shadow-sm ext-btn-shadow-sm-primary8">
               Continue Reading
             </a>
           </div>

src/components/Blogs/Blogs.tsx

@@ -4,12 +4,13 @@ import { BlogCardItem } from "./BlogCardItem";
 import { sanitizeBlogContentIntoStringPreview } from "@/utils/sanitize";
 
 export interface BlogsProps {
+  preset?: "blogs" | "categories";
   page: number;
   search?: string;
 }
 
-export default async function Blogs({ page, search }: BlogsProps) {
-  const data = await fetchBlog(page, search);
+export default async function Blogs({ page, search, preset = "blogs" }: BlogsProps) {
+  const data = await fetchBlog({ page, search });
 
   if (!data?.totalDocs) return <></>;
 
@@ -41,6 +42,7 @@ export default async function Blogs({ page, search }: BlogsProps) {
             hasNextPage={data.hasNextPage}
             hasPreviousPage={data.hasPrevPage}
             totalPages={data.totalPages}
+            usePathParams={preset === "blogs" ? false : true}
           />
         </div>
       )}

src/components/Pagination.tsx

@@ -7,9 +7,16 @@ interface PaginationProps {
   hasPreviousPage: boolean;
   hasNextPage: boolean;
   totalPages: number;
+  usePathParams?: boolean;
 }
 
-export default function Pagination({ page, hasPreviousPage, hasNextPage, totalPages }: PaginationProps) {
+export default function Pagination({
+  page,
+  hasPreviousPage,
+  hasNextPage,
+  totalPages,
+  usePathParams = false,
+}: PaginationProps) {
   const activePage = page;
   const pathName = usePathname();
 
@@ -17,11 +24,16 @@ export default function Pagination({ page, hasPreviousPage, hasNextPage, totalPa
   const handlePageChange = (page: string | number) => {
     if (typeof page === "string") return;
     if (typeof window === "undefined") return;
-
     const url = new URL(window.location.href);
     const searchParams = new URLSearchParams(url.search);
+
+    if (usePathParams) {
+      searchParams.set("page", `${page}`);
+      window.location.href = `${pathName}/page/${page}/?${searchParams}`;
+    } else {
       searchParams.set("page", `${page}`);
       window.location.href = `${pathName}/?${searchParams}`;
+    }
   };
 
   const getPageNumbers = () => {

src/services/payload/blog.ts

@@ -1,21 +1,34 @@
 import payloadConfig from "@/payload.config";
 import { formatDate } from "@/utils/datetime";
-import { getPayload } from "payload";
+import { getPayload, Where } from "payload";
 
-export async function fetchBlog(page: number | undefined, search: string = "") {
+type FetchBlogParams = {
+  page?: number;
+  search?: string;
+  categorySlug?: string;
+};
+
+export async function fetchBlog({ page, search = "", categorySlug = "" }: FetchBlogParams = {}) {
   const payload = await getPayload({ config: payloadConfig });
+
+  const queryCondition: Where = {};
+  if (!!search) {
+    queryCondition["title"] = {
+      contains: search,
+    };
+  }
+  if (!!categorySlug) {
+    queryCondition["categories"] = {
+      equals: 9,
+    };
+  }
+
   const blogDataQuery = await payload.find({
     collection: "blogs",
     page,
     pagination: true,
-    limit: 6,
-    where: !search
-      ? undefined
-      : {
-          title: {
-            contains: search,
-          },
-        },
+    limit: 9,
+    where: queryCondition,
   });
 
   const formattedData = blogDataQuery.docs.map((item) => {