102 lines
5.4 KiB
JavaScript
102 lines
5.4 KiB
JavaScript
import React from 'react';
|
|
import Link from 'next/link';
|
|
import BlogSidebar from '../BlogSidebar/BlogSidebar.js';
|
|
import VideoModal from '../ModalVideo/VideoModal';
|
|
import blogs from '../../api/blogs';
|
|
import Image from 'next/image.js';
|
|
|
|
const ClickHandler = () => {
|
|
window.scrollTo(10, 0);
|
|
};
|
|
|
|
const BlogList = (props) => {
|
|
return (
|
|
<section className="wpo-blog-pg-section section-padding">
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className={`col col-lg-12 ${props.blRight}`}>
|
|
<div className="wpo-blog-content">
|
|
<div className="row">
|
|
{blogs.map((blog, bitem) => (
|
|
<div className="col-lg-4 col-md-6 col-12" key={bitem}>
|
|
<div className={`post ${blog.blClass}`}>
|
|
<div className="entry-media">
|
|
<Image src={blog.blogSingleImg} alt="" />
|
|
{/* <VideoModal /> */}
|
|
</div>
|
|
<div className="entry-meta">
|
|
<ul>
|
|
{/* <li><i className="fi flaticon-comment-white-oval-bubble"></i> Comments {blog.comment} </li> */}
|
|
<li>
|
|
<i className="fi flaticon-calendar"></i> {blog.create_at}
|
|
</li>
|
|
<li>
|
|
<i className="fi flaticon-user"></i>
|
|
<Link onClick={ClickHandler} href={'/blog-single/[slug]'} as={`/blog-single/${blog.slug}`}>
|
|
{blog.authorTitle}
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div className="entry-details">
|
|
<h3 style={{
|
|
whiteSpace: 'nowrap',
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
width: '100%',
|
|
display: 'block',
|
|
}}>
|
|
<Link
|
|
onClick={ClickHandler}
|
|
href={`/blog/${blog.slug}`}
|
|
>
|
|
{blog.title}
|
|
</Link>
|
|
|
|
|
|
|
|
</h3>
|
|
<p>
|
|
{blog.para}
|
|
</p>
|
|
<Link
|
|
onClick={ClickHandler}
|
|
href={`/blog/${blog.slug}`}
|
|
className="read-more"
|
|
>
|
|
Continue Reading
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* <div className="pagination-wrapper pagination-wrapper-left">
|
|
<ul className="pg-pagination">
|
|
<li>
|
|
<Link href="/blog-left-sidebar" aria-label="Previous">
|
|
<i className="fi ti-angle-left"></i>
|
|
</Link>
|
|
</li>
|
|
<li className="active"><Link href="/blog-left-sidebar">1</Link></li>
|
|
<li><Link href="/blog-left-sidebar">2</Link></li>
|
|
<li><Link href="/blog-left-sidebar">3</Link></li>
|
|
<li>
|
|
<Link href="/blog-left-sidebar" aria-label="Next">
|
|
<i className="fi ti-angle-right"></i>
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div> */}
|
|
</div>
|
|
</div>
|
|
{/* <BlogSidebar blLeft={props.blLeft}/> */}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default BlogList;
|