src/app/(main)/blog/page.tsx

@@ -10,8 +10,10 @@ export const metadata = {
   description: "Blog - Cochise Oncology",
 };
 
-export default async function BlogPage({ searchParams }: { searchParams?: Promise<{ page?: string }> }) {
-  const paramsPage = (await searchParams)?.page;
+export default async function BlogPage({ searchParams }: { searchParams?: Promise<{ page?: string; s?: string }> }) {
+  const params = await searchParams;
+  const paramsPage = params?.page;
+  const paramsSearch = params?.s;
   const page = sanitizePageNumber(paramsPage);
 
   return (
@@ -32,9 +34,28 @@ export default async function BlogPage({ searchParams }: { searchParams?: Promis
         </div>
       </section>
 
+      <div className="px-3 md:px-4 mt-4 lg:w-2/3 lg:mx-auto">
+        <form action="/blog" method="GET">
+          <div className="input-group">
+            <input
+              type="text"
+              name="s"
+              defaultValue={paramsSearch ?? ""}
+              placeholder="Search blog..."
+              className="input-lg input-circle form-control"
+            />
+            <div className="input-group-append">
+              <button className="btn btn-info text-white" type="submit">
+                Search
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+
       <section className="page-section" id="blog">
         <Suspense fallback={<Loading />}>
-          <Blogs page={page} />
+          <Blogs page={page} search={paramsSearch} />
         </Suspense>
       </section>
 

src/components/Blocks/Form/index.scss

@@ -1,69 +0,0 @@
-@use "../css/queries.scss" as *;
-
-.form {
-  display: flex;
-  flex-direction: column;
-}
-
-.hasSubmitted {
-  align-items: center;
-  justify-content: center;
-  height: 80vh;
-
-  @include small-break {
-    height: 100%;
-  }
-}
-
-.intro {
-  margin-bottom: var(--base);
-
-  @include mid-break {
-    margin-bottom: var(--base);
-  }
-}
-
-.confirmationMessage {
-  max-width: 800px;
-  text-align: center;
-
-  * {
-    margin: 0;
-  }
-}
-
-.fieldWrap {
-  position: relative;
-  z-index: 2;
-  display: flex;
-  flex-wrap: wrap;
-  margin-left: calc(var(--base) * -0.5);
-  margin-right: calc(var(--base) * -0.5);
-  width: calc(100% + #{var(--base)});
-
-  > * {
-    width: 100%;
-  }
-}
-
-.Select {
-  & label {
-    position: absolute;
-    top: calc(var(--base) * -0.5);
-  }
-}
-
-.sidebarContent {
-  @include mid-break {
-    display: none;
-  }
-}
-
-.mobileSidebar {
-  display: none;
-
-  @include mid-break {
-    display: block;
-    margin-bottom: calc(var(--base) * 2);
-  }
-}

src/components/Blogs/Blogs.tsx

@@ -5,10 +5,11 @@ import { sanitizeBlogContentIntoStringPreview } from "@/utils/sanitize";
 
 export interface BlogsProps {
   page: number;
+  search?: string;
 }
 
-export default async function Blogs({ page }: BlogsProps) {
-  const data = await fetchBlog(page);
+export default async function Blogs({ page, search }: BlogsProps) {
+  const data = await fetchBlog(page, search);
 
   if (!data?.totalDocs) return <></>;
 

src/components/Pagination.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useRouter } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 import React from "react";
 
 interface PaginationProps {
@@ -13,13 +13,18 @@ interface PaginationProps {
 export default function Pagination({ page, hasPreviousPage, hasNextPage, totalPages }: PaginationProps) {
   const activePage = page;
   const router = useRouter();
+  const pathName = usePathname();
 
   // Function to handle page change
   const handlePageChange = (page: string | number) => {
     if (typeof page === "string") return;
     if (typeof window === "undefined") return;
 
-    router.push(`/blog/?page=${page}`);
+    const url = new URL(window.location.href);
+    const searchParams = new URLSearchParams(url.search);
+    searchParams.set("page", `${page}`);
+
+    router.push(`${pathName}/?${searchParams}`);
   };
 
   const getPageNumbers = () => {

src/services/payload/blog.ts

@@ -2,17 +2,32 @@ import payloadConfig from "@/payload.config";
 import { formatDate } from "@/utils/datetime";
 import { getPayload } from "payload";
 
-export async function fetchBlog(page: number | undefined) {
+export async function fetchBlog(page: number | undefined, search: string = "") {
   const payload = await getPayload({ config: payloadConfig });
   const blogDataQuery = await payload.find({
     collection: "blogs",
     page,
     pagination: true,
     limit: 6,
-    where: {
+    where: !search
+      ? {
           is_published: {
             equals: true,
           },
+        }
+      : {
+          and: [
+            {
+              is_published: {
+                equals: true,
+              },
+            },
+            {
+              title: {
+                contains: search,
+              },
+            },
+          ],
         },
   });