83 lines
2.7 KiB
JavaScript
83 lines
2.7 KiB
JavaScript
import React from "react";
|
|
import BlogSidebar from "./BlogSidebar";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { blogArticles5 } from "@/data/blogs";
|
|
export default function Blogs() {
|
|
return (
|
|
<div className="section-blog-grid tf-spacing-2">
|
|
<div className="tf-container">
|
|
<div className="row">
|
|
<div className="col-lg-8 left">
|
|
<div className="tf-grid-layout md-col-2">
|
|
{blogArticles5.map((article) => (
|
|
<div key={article.id} className="blog-article-item hover-image">
|
|
<Link
|
|
href={`/single-post/${article.id}`}
|
|
className="article-thumb mb_25"
|
|
>
|
|
<Image
|
|
className="lazyload"
|
|
data-src={article.imageSrc}
|
|
alt={article.alt}
|
|
src={article.imageSrc}
|
|
width={article.width}
|
|
height={article.height}
|
|
/>
|
|
</Link>
|
|
<div className="article-content">
|
|
<ul className="blog-article-meta mb_15 d-flex align-items-center">
|
|
<li className="meta-item text-body-1">
|
|
<a href="#" className="link-black">
|
|
{article.category}
|
|
</a>
|
|
</li>
|
|
<li className="meta-item date text-body-1">
|
|
{article.date}
|
|
</li>
|
|
</ul>
|
|
<h5 className="title letter-spacing-2">
|
|
<Link
|
|
href={`/single-post/${article.id}`}
|
|
className="link"
|
|
>
|
|
{article.title}
|
|
</Link>
|
|
</h5>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<ul className="wg-pagination d-flex justify-content-center gap_12 mt_85">
|
|
<li>
|
|
<a href="#">
|
|
<i className="icon-angle-left-solid" />
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" className="active">
|
|
1
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">...</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">4</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<i className="icon-angle-right-solid" />
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div className="col-lg-4 right">
|
|
<BlogSidebar />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|