2025-08-29 21:46:25 +05:30

98 lines
5.2 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 = 3;
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));
}, [active]);
return (
<>
<ConsenHead title="Top 5 SEO Trends for 2025 | 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">
{
BlogData?.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, 40) + '...'
: 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;