118 lines
4.0 KiB
TypeScript
Raw Normal View History

2025-02-03 12:13:56 +07:00
import BlogComments from "@/components/Blogs/BlogComments";
import BlogWidget from "@/components/Blogs/BlogWidget";
import CommentForm from "@/components/CommentForm";
2025-02-03 12:13:56 +07:00
import { fetchBlogDetail } from "@/services/payload/blog";
import { RichText } from "@payloadcms/richtext-lexical/react";
import { Metadata } from "next";
2025-02-03 12:13:56 +07:00
import Image from "next/image";
2025-02-03 14:17:13 +07:00
export async function generateMetadata({ params }: { params: { slug: string } }): Promise<Metadata> {
2025-02-03 12:13:56 +07:00
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 || ""],
},
};
}
2025-02-03 14:17:13 +07:00
export default async function SingleBlogPage({ params }: { params: Promise<{ slug: string }> }) {
const slug = (await params).slug;
2025-02-03 12:13:56 +07:00
const data = await fetchBlogDetail(slug);
if (!data) return <></>;
return (
<>
2025-02-03 14:17:13 +07:00
<section className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden">
{/* <!-- Background Shape --> */}
2025-02-03 14:17:13 +07:00
<div className="bg-shape-1 opacity-003">
<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">
2025-02-03 14:17:13 +07:00
<h1 className="hs-title-10 mb-10 wow fadeInUp">{data.data.title}</h1>
{/* Author, Categories, Comments */}
2025-02-03 14:17:13 +07:00
<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" />
2025-02-03 14:17:13 +07:00
<span className="visually-hidden">Date:</span> {data.createdAt}
</a>
</div>
<div className="d-inline-block me-3">
<i className="mi-folder size-16" />
2025-02-03 14:17:13 +07:00
<span className="visually-hidden">Categories:</span> <a href="#">Design</a>, <a href="#">Branding</a>
</div>
</div>
{/* End Author, Categories, Comments */}
</div>
</div>
</div>
</section>
2025-02-03 14:17:13 +07:00
<>
{/* 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">
2025-02-03 14:17:13 +07:00
<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>
</>
</>
);
}