diff --git a/src/app/(main)/blog/page.tsx b/src/app/(main)/blog/page.tsx index b413360..02c02c0 100644 --- a/src/app/(main)/blog/page.tsx +++ b/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 +
+
+
+ +
+ +
+
+
+
+
}> - +
diff --git a/src/app/globals.css b/src/app/globals.css index b5e4dbf..4c79a60 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -8,6 +8,7 @@ --ext-color-primary-3: #2e2d51; --ext-color-primary-4: #d4a187; --ext-color-primary-5: #e7ccc0; + --ext-color-primary-6: #64b3b4; --background: #ffffff; --foreground: #171717; } @@ -19,6 +20,7 @@ --ext-color-primary-3: #2e2d51; --ext-color-primary-4: #d4a187; --ext-color-primary-5: #e7ccc0; + --ext-color-primary-6: #64b3b4; --background: #0a0a0a; --foreground: #ededed; } @@ -34,18 +36,25 @@ body { .ext-btn { @apply py-2 px-4 rounded-full hover:opacity-95 hover:scale-95 transition-transform font-semibold no-underline; } - .ext-btn-primary { @apply bg-extColorPrimary text-white; } - .ext-btn-primary2 { @apply bg-extColorPrimary2 text-white; } - .ext-btn-primary3 { @apply bg-extColorPrimary3 text-white; } + .ext-btn-primary4 { + @apply bg-extColorPrimary4 text-white; + } + + .ext-btn-shadow-sm { + @apply py-2 px-3 rounded-full text-sm font-medium no-underline shadow-[0px_0px_10px_0px_rgba(0,0,0,0.5)]; + } + .ext-btn-shadow-sm-primary4 { + @apply bg-extColorPrimary4 text-white hover:text-white hover:bg-extColorPrimary6 transition-colors; + } } .bg-gradient { diff --git a/src/components/Blocks/Form/index.scss b/src/components/Blocks/Form/index.scss deleted file mode 100644 index 3f3203b..0000000 --- a/src/components/Blocks/Form/index.scss +++ /dev/null @@ -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); - } -} diff --git a/src/components/Blogs/BlogCardItem.tsx b/src/components/Blogs/BlogCardItem.tsx index 554f8ec..af8a0a5 100644 --- a/src/components/Blogs/BlogCardItem.tsx +++ b/src/components/Blogs/BlogCardItem.tsx @@ -19,36 +19,21 @@ export interface BlogCardItemProps { export function BlogCardItem({ data }: BlogCardItemProps) { return ( -
-
-
+
+
+ -
-

+
+

{data.title} -

-
{data.contentPreview}
-
- {!!data?.author?.name && ( - - )} - +

+
@@ -58,22 +43,14 @@ export function BlogCardItem({ data }: BlogCardItemProps) { export function BlogCardItemSkeleton() { return ( -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
diff --git a/src/components/Blogs/Blogs.tsx b/src/components/Blogs/Blogs.tsx index 9088e3c..defda97 100644 --- a/src/components/Blogs/Blogs.tsx +++ b/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 <>; diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx index 3aa5fef..b96701a 100644 --- a/src/components/Pagination.tsx +++ b/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 = () => { diff --git a/src/services/payload/blog.ts b/src/services/payload/blog.ts index c5fd7a8..410c398 100644 --- a/src/services/payload/blog.ts +++ b/src/services/payload/blog.ts @@ -2,18 +2,33 @@ 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: { - is_published: { - equals: true, - }, - }, + where: !search + ? { + is_published: { + equals: true, + }, + } + : { + and: [ + { + is_published: { + equals: true, + }, + }, + { + title: { + contains: search, + }, + }, + ], + }, }); const formattedData = blogDataQuery.docs.map((item) => { diff --git a/tailwind.config.ts b/tailwind.config.ts index ecba4b4..e199f93 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -15,6 +15,8 @@ export default { extColorPrimary2: "var(--ext-color-primary-2)", extColorPrimary3: "var(--ext-color-primary-3)", extColorPrimary4: "var(--ext-color-primary-4)", + extColorPrimary5: "var(--ext-color-primary-5)", + extColorPrimary6: "var(--ext-color-primary-6)", }, }, },