120 lines
4.2 KiB
JavaScript
120 lines
4.2 KiB
JavaScript
import Layout from "@/components/layout/Layout";
|
|
import Link from "next/link";
|
|
import Blogs from "@/utils/Blog.utils";
|
|
import { notFound } from "next/navigation";
|
|
|
|
export async function generateStaticParams() {
|
|
return Blogs.map((item) => ({
|
|
slug: item.slug,
|
|
}));
|
|
}
|
|
|
|
export default function BlogDetails({ params }) {
|
|
const blog = Blogs.find((item) => item.slug === params.slug);
|
|
|
|
if (!blog) return notFound();
|
|
|
|
const sameCategoryBlogs = Blogs.filter(
|
|
(item) => item.category === blog.category && item.slug !== blog.slug
|
|
);
|
|
|
|
const relatedBlogs = sameCategoryBlogs.length > 0 ? [sameCategoryBlogs[0]] : [];
|
|
|
|
return (
|
|
<Layout
|
|
headerStyle={2}
|
|
footerStyle={1}
|
|
breadcrumbTitle={blog.title}
|
|
bannerImage={blog.bannerImage}
|
|
>
|
|
<section className="service-details pt_90 pb_90">
|
|
<div className="auto-container">
|
|
<div className="row clearfix">
|
|
|
|
<div className="col-lg-4 col-md-12 col-sm-12 sidebar-side">
|
|
<div className="default-sidebar service-sidebar mr_15">
|
|
|
|
<div className="sidebar-widget category-widget">
|
|
<div className="widget-title">
|
|
<h3>Categories</h3>
|
|
</div>
|
|
<div className="widget-content">
|
|
<ul className="category-list clearfix">
|
|
{Blogs.map((b) => (
|
|
<li key={b.id}>
|
|
<Link
|
|
href={`/blog/${b.slug}`}
|
|
className={b.slug === blog.slug ? "current" : ""}
|
|
>
|
|
{b.title}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
{relatedBlogs.length > 0 && (
|
|
<div className="sidebar-widget related-post">
|
|
<div className="widget-title">
|
|
<h3>Related Blog</h3>
|
|
</div>
|
|
<div className="post-inner">
|
|
{relatedBlogs.map((related) => (
|
|
<div className="service-block-one" key={related.id}>
|
|
<div className="inner-box">
|
|
<div className="image-box">
|
|
<figure className="image">
|
|
<img src={related.thumbnail} alt={related.title} />
|
|
</figure>
|
|
</div>
|
|
<div className="lower-content2">
|
|
<h3>
|
|
<Link href={`/blog/${related.slug}`}>
|
|
{related.title}
|
|
</Link>
|
|
</h3>
|
|
<p>{related.shortDesc.slice(0, 80)}...</p>
|
|
<Link
|
|
href={`/blog/${related.slug}`}
|
|
className="read-more"
|
|
>
|
|
Read More
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-lg-8 col-md-12 col-sm-12 content-side">
|
|
<div className="blog-details-content">
|
|
<div className="news-block-one">
|
|
<div className="inner-box">
|
|
<figure className="image-box">
|
|
<img
|
|
src={blog.bigImage}
|
|
alt={blog.title}
|
|
style={{ width: "100%", height: "auto" }}
|
|
/>
|
|
</figure>
|
|
<div className="lower-content">
|
|
<h2>{blog.title}</h2>
|
|
<div dangerouslySetInnerHTML={{ __html: blog.content }} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</Layout>
|
|
);
|
|
}
|