diff --git a/src/app/(main)/blog/[slug]/page.tsx b/src/app/(main)/blog/[slug]/page.tsx index 880a761..e2c7bdf 100644 --- a/src/app/(main)/blog/[slug]/page.tsx +++ b/src/app/(main)/blog/[slug]/page.tsx @@ -1,7 +1,8 @@ +import BlogDetail, { BlogDetailContentSkeleton } from "@/components/Blogs/BlogDetail"; import { fetchBlogDetail } from "@/services/payload/blog"; -import { RichText } from "@payloadcms/richtext-lexical/react"; import { Metadata } from "next"; import Image from "next/image"; +import { Suspense } from "react"; export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise { const slug = (await params).slug; @@ -14,7 +15,6 @@ export async function generateMetadata({ params }: { params: Promise<{ slug: str openGraph: { title: "Cochise Oncology", description: "Cochise Oncology", - images: [""], }, }; } @@ -27,17 +27,24 @@ export async function generateMetadata({ params }: { params: Promise<{ slug: str openGraph: { title: title, description: title, - images: [blog.imgUrl || ""], + images: [{ url: blog.imgUrl }], }, }; } export default async function SingleBlogPage({ params }: { params: Promise<{ slug: string }> }) { const slug = (await params).slug; - const data = await fetchBlogDetail(slug); - if (!data) return <>; + return ( + <> + }> + + + + ); +} +function Loading() { return ( <>
@@ -50,19 +57,13 @@ export default async function SingleBlogPage({ params }: { params: Promise<{ slu
-

{data.data.title}

+

...

{/* Author, Categories, Comments */}
-
- - - Date: {data.createdAt} - +
+ + ...
- {/*
- - Categories: Design, Branding -
*/}
{/* End Author, Categories, Comments */}
@@ -70,32 +71,9 @@ export default async function SingleBlogPage({ params }: { params: Promise<{ slu
- <> - {/* Section */} -
-
-
- {/* Content */} -
- {/* Post */} -
-
-
- Image Description -
-
- -
-
-
- {/* End Post */} -
- {/* End Content */} -
-
-
- {/* End Section */} - + {/* Section */} + + {/* End Section */} ); } diff --git a/src/app/(main)/contact/page.tsx b/src/app/(main)/contact/page.tsx index 12c61f8..0482887 100644 --- a/src/app/(main)/contact/page.tsx +++ b/src/app/(main)/contact/page.tsx @@ -1,15 +1,14 @@ import Contact from "@/components/Contacts/Contact"; -import { fetchForm } from "@/services/payload/form"; +import ContactForm from "@/components/Contacts/ContactForm"; import Image from "next/image"; +import { Suspense } from "react"; export const metadata = { title: "Contact - Cochise Oncology", description: "Contact - Cochise Oncology", }; -export default async function SlickContactPageDark() { - const formRes = await fetchForm(1); - +export default async function ContactPage() { return ( <>
- + + }> + + +
); diff --git a/src/app/(main)/slick-contact/page.tsx b/src/app/(main)/slick-contact/page.tsx deleted file mode 100644 index d2edcdc..0000000 --- a/src/app/(main)/slick-contact/page.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import Contact from "@/components/Contacts/Contact"; -import ContactDark from "@/components/ContactDark"; -import Faq from "@/components/Faq"; - -import Image from "next/image"; - -export const metadata = { - title: "Slick Contacts || Resonance — One & Multi Page React Nextjs Creative Template", - description: "Resonance — One & Multi Page React Nextjs Creative Template", -}; - -const dark = false; - -export default function SlickContactPage() { - return ( - <> -
- {/* */} -
- -
- {/* */} - -
-
-
-

Contact Us

- -

- Crafting immersive digital journeys for brands. -

-
-
-
-
- -
- {dark ? : } -
-
-
-
- {/* Decorative Waves */} -
-
- -
-
- {/* End Decorative Waves */} -
-
-

Frequently Asked Questions

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar vitae neque et porttitor. Integer - non dapibus diam, ac eleifend lectus lorem ipsum. In maximus ligula semper metus pellentesque mattis. - Maecenas volutpat, diam enim sagittis quam. -

-
-
- {/* Accordion */} - - {/* End Accordion */} -
-
-
-
- - ); -} diff --git a/src/components/Blogs/Blog.tsx b/src/components/Blogs/Blog.tsx index 930d2d2..e691462 100644 --- a/src/components/Blogs/Blog.tsx +++ b/src/components/Blogs/Blog.tsx @@ -2,6 +2,7 @@ import { blogs9 } from "@/data/blogs"; import React from "react"; import Image from "next/image"; import Link from "next/link"; + export default function Blog() { return ( <> @@ -10,31 +11,20 @@ export default function Blog() {

Our Blog

-

- Check the latest news about our company in our blog. -

+

Check the latest news about our company in our blog.

- There are three kinds of web developer specialization front-end - developer, back-end developer, and full-stack developer. + There are three kinds of web developer specialization front-end developer, back-end developer, and + full-stack developer.

- + - Our blog{" "} - + Our blog -
@@ -44,10 +34,7 @@ export default function Blog() {
{/* Post Item */} {blogs9.map((elm: any, i: number) => ( -
+
@@ -62,9 +49,7 @@ export default function Blog() {

- - {elm.title} - + {elm.title}

{elm.intro}
diff --git a/src/components/Blogs/BlogCardItem.tsx b/src/components/Blogs/BlogCardItem.tsx index c54fde5..cce8fb8 100644 --- a/src/components/Blogs/BlogCardItem.tsx +++ b/src/components/Blogs/BlogCardItem.tsx @@ -59,7 +59,7 @@ export function BlogCardItem({ data }: BlogCardItemProps) { export function BlogCardItemSkeleton() { return ( -
+
diff --git a/src/components/Blogs/BlogDetail.tsx b/src/components/Blogs/BlogDetail.tsx new file mode 100644 index 0000000..9171599 --- /dev/null +++ b/src/components/Blogs/BlogDetail.tsx @@ -0,0 +1,94 @@ +import { fetchBlogDetail } from "@/services/payload/blog"; +import { RichText } from "@payloadcms/richtext-lexical/react"; +import Image from "next/image"; + +export interface BlogDetailProps { + slug: string; +} + +export default async function BlogDetail({ slug }: BlogDetailProps) { + const data = await fetchBlogDetail(slug); + + if (!data) return <>; + + return ( + <> +
+ {/* */} +
+ +
+ {/* */} + +
+
+
+

{data.data.title}

+ {/* Author, Categories, Comments */} +
+ +
+ {/* End Author, Categories, Comments */} +
+
+
+
+ + {/* Section */} +
+
+
+ {/* Content */} +
+ {/* Post */} +
+
+
+ Image Description +
+
+ +
+
+
+ {/* End Post */} +
+ {/* End Content */} +
+
+
+ {/* End Section */} + + ); +} + +export function BlogDetailContentSkeleton() { + return ( +
+
+
+ {/* Content */} +
+ {/* Post */} +
+
+
+
+
+
+
+
+
+
+
+ {/* End Post */} +
+ {/* End Content */} +
+
+
+ ); +} diff --git a/src/components/Contacts/Contact.tsx b/src/components/Contacts/Contact.tsx index 4973a31..b5c293d 100644 --- a/src/components/Contacts/Contact.tsx +++ b/src/components/Contacts/Contact.tsx @@ -1,15 +1,11 @@ -"use client"; import { contactItems } from "@/data/contact"; -import React from "react"; -import { FormBlock } from "../Blocks/Form"; -import { Form as FormType } from "@payloadcms/plugin-form-builder/types"; -import { Form } from "@/payload-types"; +import React, { ReactNode } from "react"; export interface ContactProps { - form?: FormType | Form; + children?: ReactNode; } -export default function Contact({ form }: ContactProps) { +export default function Contact({ children }: ContactProps) { return (
@@ -76,14 +72,7 @@ export default function Contact({ form }: ContactProps) { {/* End Right Column */}
- {!!form && ( -
-

{form?.title ?? ""}

-
- -
-
- )} + {children}
); } diff --git a/src/components/Contacts/ContactForm.tsx b/src/components/Contacts/ContactForm.tsx new file mode 100644 index 0000000..183ca32 --- /dev/null +++ b/src/components/Contacts/ContactForm.tsx @@ -0,0 +1,17 @@ +import { fetchForm } from "@/services/payload/form"; +import { FormBlock } from "@/components/Blocks/Form"; + +export default async function ContactForm() { + const form = await fetchForm(1); + + if (!form) return <>; + + return ( +
+

{form?.title ?? ""}

+
+ +
+
+ ); +}