225 lines
15 KiB
JavaScript
225 lines
15 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 BlogSidebar from '../../components/BlogSidebar/BlogSidebar';
|
|
import Scrollbar from '../../components/scrollbar/scrollbar';
|
|
import Image from 'next/image';
|
|
import blog3 from '/public/images/blog-details/comments-author/img-1.jpg'
|
|
import blog4 from '/public/images/blog-details/comments-author/img-2.jpg'
|
|
import blog5 from '/public/images/blog-details/comments-author/img-3.jpg'
|
|
import blog6 from '/public/images/blog-details/author.jpg'
|
|
import gl1 from '/public/images/blog/img-3.jpg'
|
|
import gl2 from '/public/images/blog/img-2.jpg'
|
|
|
|
const submitHandler = (e) => {
|
|
e.preventDefault()
|
|
}
|
|
|
|
|
|
const BlogSingle = (props) => {
|
|
const router = useRouter()
|
|
|
|
const BlogDetails = blogs.find(item => item.slug === router.query.slug)
|
|
|
|
|
|
return (
|
|
<Fragment>
|
|
<Navbar2 />
|
|
<PageTitle pageTitle={BlogDetails?.title} backgroundImage={BlogDetails?.bannerImg} 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 format-standard-image">
|
|
<div className="entry-media">
|
|
<div style={{ width: "100%", height: "400px", position: "relative" }}>
|
|
<Image
|
|
src={BlogDetails?.blogSingleImg}
|
|
alt=""
|
|
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="/">{BlogDetails?.authorTitle}</Link> </li>
|
|
<li><i className="fi ti-comment-alt"></i> Comments {BlogDetails?.comment}</li>
|
|
</ul> */}
|
|
</div>
|
|
<h2>{BlogDetails?.title}</h2>
|
|
<div
|
|
dangerouslySetInnerHTML={{ __html: BlogDetails?.description }}
|
|
></div>
|
|
|
|
|
|
{/* <div className="gallery">
|
|
<div>
|
|
<Image src={gl1} alt="" />
|
|
</div>
|
|
<div>
|
|
<Image src={gl2} alt="" />
|
|
</div>
|
|
</div> */}
|
|
</div>
|
|
|
|
{/* <div className="tag-share clearfix">
|
|
<div className="tag">
|
|
<span>Share: </span>
|
|
<ul>
|
|
<li><Link href="/blog-single/support-progressive-change">Election</Link></li>
|
|
<li><Link href="/blog-single/support-progressive-change">Vote</Link></li>
|
|
<li><Link href="/blog-single/support-progressive-change">Political</Link></li>
|
|
</ul>
|
|
</div>
|
|
</div> */}
|
|
{/* <div className="tag-share-s2 clearfix">
|
|
<div className="tag">
|
|
<span>Share: </span>
|
|
<ul>
|
|
<li><Link href="/">facebook</Link></li>
|
|
<li><Link href="/">twitter</Link></li>
|
|
<li><Link href="/">linkedin</Link></li>
|
|
<li><Link href="/">pinterest</Link></li>
|
|
</ul>
|
|
</div>
|
|
</div> */}
|
|
|
|
{/* <div className="author-box">
|
|
<div className="author-avatar">
|
|
<Link href="/" target="_blank"><Image src={blog6} alt="" /></Link>
|
|
</div>
|
|
<div className="author-content">
|
|
<Link href="/" className="author-name">Author: Jenny Watson</Link>
|
|
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.</p>
|
|
<div className="socials">
|
|
<ul className="social-link">
|
|
<li><Link href="/"><i className="ti-facebook"></i></Link></li>
|
|
<li><Link href="/"><i className="ti-twitter-alt"></i></Link></li>
|
|
<li><Link href="/"><i className="ti-linkedin"></i></Link></li>
|
|
<li><Link href="/"><i className="ti-instagram"></i></Link></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div> */}
|
|
|
|
{/* <div className="more-posts">
|
|
<div className="previous-post">
|
|
<Link href="/">
|
|
|
|
<span className="post-control-link">Previous Post</span>
|
|
<span className="post-name">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.</span>
|
|
|
|
</Link>
|
|
</div>
|
|
<div className="next-post">
|
|
<Link href="/">
|
|
|
|
<span className="post-control-link">Next Post</span>
|
|
<span className="post-name">Dignissimos ducimus qui blanditiis praesentiu deleniti atque corrupti quos dolores</span>
|
|
|
|
</Link>
|
|
</div>
|
|
</div> */}
|
|
|
|
{/* <div className="comments-area">
|
|
<div className="comments-section">
|
|
<h3 className="comments-title">Comments</h3>
|
|
<ol className="comments">
|
|
<li className="comment even thread-even depth-1" id="comment-1">
|
|
<div id="div-comment-1">
|
|
<div className="comment-theme">
|
|
<div className="comment-image"><Image src={blog3} alt="" /></div>
|
|
</div>
|
|
<div className="comment-main-area">
|
|
<div className="comment-wrapper">
|
|
<div className="comments-meta">
|
|
<h4>John Abraham <span className="comments-date">January 12,2022
|
|
At 9.00am</span></h4>
|
|
</div>
|
|
<div className="comment-area">
|
|
<p>I will give you a complete account of the system, and
|
|
expound the actual teachings of the great explorer of
|
|
the truth, </p>
|
|
<div className="comments-reply">
|
|
<Link href="/" className="comment-reply-link"><span>Reply</span></Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ul className="children">
|
|
<li className="comment">
|
|
<div>
|
|
<div className="comment-theme">
|
|
<div className="comment-image"><Image src={blog4} alt="" /></div>
|
|
</div>
|
|
<div className="comment-main-area">
|
|
<div className="comment-wrapper">
|
|
<div className="comments-meta">
|
|
<h4>Lily Watson <span className="comments-date">January
|
|
12,2022 At 9.00am</span></h4>
|
|
</div>
|
|
<div className="comment-area">
|
|
<p>I will give you a complete account of the system,
|
|
and expound the actual teachings of the great
|
|
explorer of the truth, </p>
|
|
<div className="comments-reply">
|
|
<Link href="/" className="comment-reply-link"><span>Reply</span></Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ul>
|
|
<li className="comment">
|
|
<div>
|
|
<div className="comment-theme">
|
|
<div className="comment-image"><Image src={blog5} alt="" /></div>
|
|
</div>
|
|
<div className="comment-main-area">
|
|
<div className="comment-wrapper">
|
|
<div className="comments-meta">
|
|
<h4>John Abraham <span className="comments-date">January
|
|
12,2022 At 9.00am</span></h4>
|
|
</div>
|
|
<div className="comment-area">
|
|
<p>I will give you a complete account of the
|
|
system, and expound the actual teachings
|
|
of the great explorer of the truth, </p>
|
|
<div className="comments-reply">
|
|
<Link href="/" className="comment-reply-link"><span>Reply</span></Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
</ol>
|
|
</div>
|
|
|
|
</div> */}
|
|
</div>
|
|
</div>
|
|
{/* <BlogSidebar blLeft={props.blLeft} /> */}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<Footer />
|
|
<Scrollbar />
|
|
</Fragment>
|
|
)
|
|
};
|
|
export default BlogSingle;
|