69 lines
2.1 KiB
JavaScript
69 lines
2.1 KiB
JavaScript
"use client";
|
|
import React from "react";
|
|
import Link from "next/link";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import { Autoplay } from "swiper/modules";
|
|
|
|
import "swiper/css";
|
|
|
|
import Blogs from "@/utils/Blog.utils";
|
|
|
|
export default function News() {
|
|
return (
|
|
<section className="news-section pt_90 pb_90">
|
|
<div className="auto-container">
|
|
<div className="sec-title mb_50 centred">
|
|
<span className="sub-title">Our Blog</span>
|
|
<h2>
|
|
Take a look at our most <br />
|
|
recent articles
|
|
</h2>
|
|
</div>
|
|
|
|
<Swiper
|
|
modules={[Autoplay]}
|
|
spaceBetween={30}
|
|
slidesPerView={3}
|
|
loop={true}
|
|
autoplay={{
|
|
delay: 3000,
|
|
disableOnInteraction: false,
|
|
}}
|
|
breakpoints={{
|
|
320: { slidesPerView: 1 },
|
|
768: { slidesPerView: 2 },
|
|
1024: { slidesPerView: 3 },
|
|
}}
|
|
>
|
|
{Blogs.map((blog, i) => (
|
|
<SwiperSlide key={i}>
|
|
<div className="news-block-one">
|
|
<div className="inner-box">
|
|
<figure className="image-box">
|
|
<Link href={`/blog/${blog.slug}`} aria-label="Blog Image">
|
|
<img src={blog.thumbnail} alt={blog.title} />
|
|
</Link>
|
|
</figure>
|
|
<div className="lower-content">
|
|
<h3>
|
|
<Link href={`/blog/${blog.slug}`} aria-label="Our Blog title">
|
|
{blog.title.length > 40 ? blog.title.slice(0, 40) + "..." : blog.title}
|
|
</Link>
|
|
</h3>
|
|
<p>{blog.shortDesc}</p>
|
|
<div className="link">
|
|
<Link href={`/blog/${blog.slug}`} aria-label="Read More">
|
|
<span>Read More</span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|