61 lines
2.9 KiB
JavaScript
61 lines
2.9 KiB
JavaScript
import React from 'react';
|
|
import { Link } from 'gatsby';
|
|
import posts from 'data/Blog/popular-posts.json';
|
|
import postsRTL from 'data/Blog/popular-posts-rtl.json';
|
|
|
|
const PopularPosts = ({ style = "4", rtl }) => {
|
|
const postsData = rtl ? postsRTL : posts;
|
|
|
|
return (
|
|
<section className="popular-posts pt-50 pb-100 border-bottom brd-gray">
|
|
<div className="container">
|
|
<h5 className="post-sc-title text-center text-uppercase mb-70">{ rtl ? 'أخبار شائعة' : 'Popular Posts' }</h5>
|
|
<div className="row gx-5">
|
|
{
|
|
postsData.map((post, index) => (
|
|
<div className={`col-lg-4 ${index !== posts.length - 1 ? 'border-end brd-gray':''}`} key={index}>
|
|
<div className="card border-0 bg-transparent rounded-0 mb-30 mb-lg-0 d-block">
|
|
<div className="img radius-7 overflow-hidden img-cover">
|
|
<img src={post.cover} className="card-img-top" alt="..." />
|
|
</div>
|
|
<div className="card-body px-0">
|
|
<small className="d-block date mt-10 fs-10px fw-bold">
|
|
<a href="#" className={`text-uppercase border-end brd-gray pe-3 me-3 color-blue${style}`}>{ rtl ? 'أخبار' : 'News' }</a>
|
|
<i className="bi bi-clock me-1"></i>
|
|
<a href="#" className="op-8">{ rtl ? 'موعد النشر' : 'Posted on' } { post.time }</a>
|
|
</small>
|
|
<h5 className="fw-bold mt-10 title">
|
|
<Link to={ rtl ? "/rtl-page-single-post" : "/page-single-post-5" }>
|
|
{ post.title }
|
|
</Link>
|
|
</h5>
|
|
<p className="small mt-2 op-8 fs-10px">{ post.desc } [...]
|
|
</p>
|
|
<div className="d-flex small mt-20 align-items-center justify-content-between op-9">
|
|
<div className="l_side d-flex align-items-center">
|
|
<span className="icon-20 rounded-circle d-inline-flex justify-content-center align-items-center text-uppercase bg-main p-1 me-2 text-white">
|
|
{ post.userImgLetter }
|
|
</span>
|
|
<a href="#" className="mt-1">
|
|
{ rtl ? 'بواسطة' : 'By' } { post.username }
|
|
</a>
|
|
</div>
|
|
<div className="r-side mt-1">
|
|
<i className="bi bi-chat-left-text me-1"></i>
|
|
<a href="#">{ post.comments }</a>
|
|
<i className="bi bi-eye ms-4 me-1"></i>
|
|
<a href="#">{ post.views }</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default PopularPosts |