next-cochise/src/app/(main)/blog/[slug]/page.tsx

import BlogComments from "@/components/Blogs/BlogComments";
import BlogWidget from "@/components/Blogs/BlogWidget";
import CommentForm from "@/components/CommentForm";
import { fetchBlogDetail } from "@/services/payload/blog";
import { RichText } from "@payloadcms/richtext-lexical/react";
import { Metadata } from "next";
import Image from "next/image";

export async function generateMetadata({
  params,
}: {
  params: { slug: string };
}): Promise<Metadata> {
  const blog = await fetchBlogDetail(params.slug);

  if (!blog) {
    return {
      title: "Cochise Oncology",
      description: "Cochise Oncology",
      openGraph: {
        title: "Cochise Oncology",
        description: "Cochise Oncology",
        images: [""],
      },
    };
  }

  const title = `${blog.data.title} - Cochise Oncology`;

  return {
    title: title,
    description: title,
    openGraph: {
      title: title,
      description: title,
      images: [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 (
    <>
      <section
        className="page-section bg-gradient-gray-light-1 bg-scroll overflow-hidden"
        id="home"
      >
        {/* <!-- Background Shape --> */}
        <div className="bg-shape-1 wow fadeIn">
          <Image
            src="/assets/images/demo-fancy/bg-shape-1.svg"
            width={1443}
            height={844}
            alt=""
          />
        </div>
        {/* <!-- End Background Shape --> */}

        <div className="container position-relative pt-sm-40 text-center">
          <div className="row">
            <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
              <h1 className="hs-title-10 mb-10 wow fadeInUp">
                {data.data.title}
              </h1>
              {/* Author, Categories, Comments */}
              <div
                className="blog-item-data mb-0 wow fadeIn"
                data-wow-delay="0.2s"
              >
                <div className="d-inline-block me-3">
                  <a href="#">
                    <i className="mi-clock size-16" />
                    <span className="visually-hidden">Date:</span>{" "}
                    {data.createdAt}
                  </a>
                </div>
                <div className="d-inline-block me-3">
                  <i className="mi-folder size-16" />
                  <span className="visually-hidden">Categories:</span>{" "}
                  <a href="#">Design</a>, <a href="#">Branding</a>
                </div>
              </div>
              {/* End Author, Categories, Comments */}
            </div>
          </div>
        </div>
      </section>
      <>
        {/* Section */}
        <section className="page-section">
          <div className="container relative">
            <div className="row">
              {/* Content */}
              <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
                {/* Post */}
                <div className="blog-item mb-80 mb-xs-40">
                  <div className="blog-item-body">
                    <div className="mb-40 mb-xs-30">
                      <Image
                        src={data.imgUrl}
                        alt="Image Description"
                        width={1350}
                        height={759}
                        className="round"
                      />
                    </div>
                    <div>
                      <RichText data={data.data.content} />
                    </div>
                  </div>
                </div>
                {/* End Post */}
              </div>
              {/* End Content */}
            </div>
          </div>
        </section>
        {/* End Section */}
        {/* Divider */}
        <hr className="mt-0 mb-0" />
        {/* End Divider */}
        {/* Section */}
        <section className="page-section">
          <div className="container relative">
            <div className="row mt-n60">
              <BlogWidget
                inputClass="newsletter-field form-control input-md circle mb-10"
                btnClass="btn btn-mod btn-color btn-medium btn-circle btn-hover-anim form-control"
              />
            </div>
          </div>
        </section>
      </>
    </>
  );
}