104 lines
5.5 KiB
JavaScript
104 lines
5.5 KiB
JavaScript
import Breadcumb from "@/src/components/Breadcumb";
|
|
import PagginationFuntion from "@/src/components/PagginationFuntion";
|
|
import BlogBan from "@/src/components/services-details-banner/blog";
|
|
import ConsenHead from "@/src/ConsenHead";
|
|
import Layout from "@/src/layout/Layout";
|
|
import { getPagination, pagination } from "@/src/utils";
|
|
import { BlogData } from "@/utils/constant.utils";
|
|
import Link from "next/link";
|
|
import { useEffect, useState } from "react";
|
|
const Blog = () => {
|
|
let sort = 12;
|
|
const [active, setActive] = useState(1);
|
|
const [state, setstate] = useState([]);
|
|
useEffect(() => {
|
|
pagination(".single_box_", sort, active);
|
|
let list = document.querySelectorAll(".single_box_");
|
|
setstate(getPagination(list.length, sort));
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: "smooth" // smooth scrolling effect
|
|
});
|
|
|
|
}, [active]);
|
|
|
|
const sortedBlogs = [...BlogData].sort((a, b) => new Date(b.date) - new Date(a.date));
|
|
|
|
return (
|
|
<>
|
|
<ConsenHead
|
|
title="Blog | Metatroncube"
|
|
description="Explore the latest SEO strategies for 2025. Stay ahead with insights from Metatroncube Software Solutions."
|
|
/>
|
|
<Layout>
|
|
<BlogBan pageName={"BLOG"} />
|
|
<div className="blog-area style-two page">
|
|
<div className="container">
|
|
<div className="row">
|
|
{
|
|
sortedBlogs?.map((blog) => {
|
|
return (
|
|
<div className="col-lg-4 col-md-6 single_box_" key={blog?.id}>
|
|
<div className="single-blog-box">
|
|
<div className="single-blog-thumb">
|
|
<img src={blog?.image} alt={blog?.slug} />
|
|
<div className="blog-top-button">
|
|
<a href="#"> {blog?.category} </a>
|
|
</div>
|
|
</div>
|
|
<div className="em-blog-content">
|
|
<div className="meta-blog-text">
|
|
<p> {blog?.date} </p>
|
|
</div>
|
|
<div className="em-blog-title">
|
|
<h2>
|
|
<Link legacyBehavior href={`${blog?.slug}`}>
|
|
<a>
|
|
{blog?.title.length > 50
|
|
? blog.title.substring(0, 50) + '...'
|
|
: blog.title}
|
|
</a>
|
|
</Link>
|
|
</h2>
|
|
</div>
|
|
<div className="em-blog-icon">
|
|
<div className="em-blog-thumb">
|
|
<img src="/assets/images/blog/blog-user-cal/admin.webp" alt={blog?.user} />
|
|
</div>
|
|
<div className="em-blog-icon-title">
|
|
<h6> {blog?.user} </h6>
|
|
</div>
|
|
</div>
|
|
<div className="blog-button">
|
|
<Link legacyBehavior href={`${blog?.slug}`}>
|
|
<a>
|
|
{" "}
|
|
Learn More <i className="bi bi-plus" />{" "}
|
|
</a>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
})
|
|
}
|
|
<div className="col-12">
|
|
<div className="pagination justify-content-center mt-4">
|
|
<PagginationFuntion
|
|
setActive={setActive}
|
|
active={active}
|
|
state={state}
|
|
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
</>
|
|
);
|
|
};
|
|
export default Blog;
|