74 lines
3.0 KiB
JavaScript
74 lines
3.0 KiB
JavaScript
import React, { Fragment } from 'react';
|
|
import { useRouter } from 'next/router';
|
|
import blogs from '../../api/blogs';
|
|
import Link from 'next/link';
|
|
import PageTitle from '../../components/pagetitle/PageTitle';
|
|
import Navbar2 from '../../components/Navbar2/Navbar2';
|
|
import Footer from '../../components/footer/Footer';
|
|
import Scrollbar from '../../components/scrollbar/scrollbar';
|
|
import Image from 'next/image';
|
|
|
|
const BlogSingle = (props) => {
|
|
const router = useRouter();
|
|
const { slug } = router.query;
|
|
|
|
const BlogDetails = blogs.find(blog => blog.slug === slug);
|
|
|
|
if (!BlogDetails) {
|
|
return (
|
|
<div className="container text-center py-5">
|
|
<h2>Blog not found!</h2>
|
|
<Link href="/blog">Back to Blog</Link>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Fragment>
|
|
<Navbar2 />
|
|
<PageTitle pageTitle={BlogDetails.title} pagesub={'Blog'} />
|
|
|
|
<section className="wpo-blog-single-section section-padding">
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className={`col col-lg-12 col-12 ${props.blRight}`}>
|
|
<div className="wpo-blog-content">
|
|
<div className={`post ${BlogDetails.blClass}`}>
|
|
<div className="entry-media">
|
|
<div style={{ width: "100%", height: "400px", position: "relative" }}>
|
|
<Image
|
|
src={BlogDetails.blogSingleImg}
|
|
alt={BlogDetails.title}
|
|
fill
|
|
style={{ objectFit: "cover" }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="entry-meta">
|
|
<ul>
|
|
<li><i className="fi flaticon-calendar"></i> {BlogDetails.create_at}</li>
|
|
<li>
|
|
<i className="fi ti-user"></i> By{' '}
|
|
<Link href="/blog">{BlogDetails.authorTitle}</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<h2>{BlogDetails.title}</h2>
|
|
<div dangerouslySetInnerHTML={{ __html: BlogDetails.description }}></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<Footer />
|
|
<Scrollbar />
|
|
</Fragment>
|
|
);
|
|
};
|
|
|
|
export default BlogSingle;
|