49 lines
1.7 KiB
JavaScript
49 lines
1.7 KiB
JavaScript
"use client";
|
|
import Link from "next/link";
|
|
import { useEffect, useState } from "react";
|
|
import data from "@/util/blog.json";
|
|
|
|
export default function BlogDetailsClient({ slug }) {
|
|
const [blogPost, setBlogPost] = useState(null);
|
|
|
|
useEffect(() => {
|
|
setBlogPost(data.find((item) => item.slug === slug));
|
|
}, [data, slug]);
|
|
|
|
if (!blogPost) return null;
|
|
|
|
return (
|
|
<div>
|
|
<div className="blog__details-thumb">
|
|
<img src={`/assets/img/blogging/${blogPost.img}`} className="w-100" alt="" />
|
|
</div>
|
|
<h1 className="title">{blogPost.title}</h1>
|
|
<div className="blog-post-meta">
|
|
<ul className="list-wrap">
|
|
<li>
|
|
<Link href="/blog" className="blog__post-tag-two">
|
|
{blogPost.category}
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<div className="blog-avatar">
|
|
<div className="avatar-thumb">
|
|
<img src="/assets/img/blog/authorImg.png" alt="" />
|
|
</div>
|
|
<div className="avatar-content">
|
|
<p>
|
|
By <Link href="#">{blogPost.author}</Link>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<i className="fas fa-calendar-alt" />
|
|
{blogPost.date}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|