217 lines
11 KiB
JavaScript
217 lines
11 KiB
JavaScript
"use client";
|
|
import React, { useState, useEffect, useRef } from "react";
|
|
import Link from "next/link";
|
|
|
|
export default function BlogList({ blogs }) {
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const itemsPerPage = 12;
|
|
const listRef = useRef(null);
|
|
|
|
const totalPages = Math.ceil(blogs.length / itemsPerPage);
|
|
|
|
const indexOfLastItem = currentPage * itemsPerPage;
|
|
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
|
|
const currentItems = blogs.slice(indexOfFirstItem, indexOfLastItem);
|
|
|
|
// Scroll to top of the list when page changes
|
|
useEffect(() => {
|
|
if (listRef.current) {
|
|
// Scroll to the top of the blog section, adjusting for some offset if needed
|
|
const yOffset = -100; // Adjust for header height if sticky
|
|
const y = listRef.current.getBoundingClientRect().top + window.pageYOffset + yOffset;
|
|
window.scrollTo({ top: y, behavior: 'smooth' });
|
|
}
|
|
}, [currentPage]);
|
|
|
|
const paginate = (pageNumber) => setCurrentPage(pageNumber);
|
|
const nextPage = () => currentPage < totalPages && setCurrentPage(currentPage + 1);
|
|
const prevPage = () => currentPage > 1 && setCurrentPage(currentPage - 1);
|
|
|
|
return (
|
|
<>
|
|
<div ref={listRef} className="row clearfix">
|
|
{currentItems.map((blog, i) => (
|
|
<div key={i} className="col-lg-4 col-md-6 col-sm-12 news-block">
|
|
<div
|
|
className="news-block-one wow fadeInUp animated"
|
|
data-wow-delay={`${i * 20}ms`}
|
|
data-wow-duration="300ms"
|
|
>
|
|
<div className="inner-box">
|
|
<figure className="image-box">
|
|
<Link href={`/blog/${blog.slug}`} aria-label="Blog Image">
|
|
<img src={blog.thumbnail} alt={blog.title} loading="lazy" />
|
|
</Link>
|
|
</figure>
|
|
<div className="lower-content">
|
|
<h3>
|
|
<Link href={`/blog/${blog.slug}`} aria-label="Our Blog title">
|
|
{blog.title.length > 35
|
|
? blog.title.slice(0, 35) + "..."
|
|
: blog.title}
|
|
</Link>
|
|
</h3>
|
|
<p>
|
|
{blog.shortDesc.length > 80
|
|
? blog.shortDesc.slice(0, 80) + "..."
|
|
: blog.shortDesc}
|
|
</p>
|
|
<div className="link">
|
|
<Link href={`/blog/${blog.slug}`} aria-label="Read More">
|
|
<span>Read More</span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Pagination Controls */}
|
|
{totalPages > 1 && (
|
|
<div
|
|
className="pagination-wrapper centred"
|
|
style={{ marginTop: "30px", marginBottom: "30px" }}
|
|
>
|
|
<ul
|
|
className="pagination clearfix"
|
|
style={{
|
|
display: "inline-flex",
|
|
gap: "10px",
|
|
listStyle: "none",
|
|
padding: 0,
|
|
}}
|
|
>
|
|
{/* Previous Button */}
|
|
<li>
|
|
<button
|
|
onClick={prevPage}
|
|
// disabled={currentPage === 1} // Keep enabled but maybe visually distinct if needed, user said do not hide
|
|
style={{
|
|
width: "40px",
|
|
height: "40px",
|
|
lineHeight: "40px",
|
|
textAlign: "center",
|
|
border: "1px solid #101A30", // Using one of the requested colors
|
|
backgroundColor: currentPage === 1 ? "#fff" : "#fff",
|
|
color: "#101A30",
|
|
fontSize: "18px",
|
|
fontWeight: "700",
|
|
cursor: currentPage === 1 ? "not-allowed" : "pointer",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
transition: "all 0.3s ease",
|
|
opacity: currentPage === 1 ? 0.5 : 1 // Visually indicate disabled but keep color
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
if (currentPage !== 1) {
|
|
e.target.style.backgroundColor = "#bc0000";
|
|
e.target.style.color = "#fff";
|
|
e.target.style.borderColor = "#bc0000";
|
|
}
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
if (currentPage !== 1) {
|
|
e.target.style.backgroundColor = "#fff";
|
|
e.target.style.color = "#101A30";
|
|
e.target.style.borderColor = "#101A30";
|
|
}
|
|
}}
|
|
>
|
|
<i className="fas fa-angle-double-left"></i>
|
|
</button>
|
|
</li>
|
|
|
|
{/* Page Numbers */}
|
|
{Array.from({ length: totalPages }, (_, i) => i + 1).map((number) => (
|
|
<li key={number}>
|
|
<button
|
|
onClick={() => paginate(number)}
|
|
style={{
|
|
width: "40px",
|
|
height: "40px",
|
|
lineHeight: "40px",
|
|
textAlign: "center",
|
|
border:
|
|
currentPage === number
|
|
? "1px solid #bc0000"
|
|
: "1px solid #101A30",
|
|
backgroundColor: currentPage === number ? "#bc0000" : "#fff",
|
|
color: currentPage === number ? "#fff" : "#101A30",
|
|
fontSize: "16px",
|
|
fontWeight: "600",
|
|
cursor: "pointer",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
transition: "all 0.3s ease",
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
if (currentPage !== number) {
|
|
e.target.style.backgroundColor = "#bc0000";
|
|
e.target.style.color = "#fff";
|
|
e.target.style.borderColor = "#bc0000";
|
|
}
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
if (currentPage !== number) {
|
|
e.target.style.backgroundColor = "#fff";
|
|
e.target.style.color = "#101A30";
|
|
e.target.style.borderColor = "#101A30";
|
|
}
|
|
}}
|
|
>
|
|
{number}
|
|
</button>
|
|
</li>
|
|
))}
|
|
|
|
{/* Next Button */}
|
|
<li>
|
|
<button
|
|
onClick={nextPage}
|
|
// disabled={currentPage === totalPages}
|
|
style={{
|
|
width: "40px",
|
|
height: "40px",
|
|
lineHeight: "40px",
|
|
textAlign: "center",
|
|
border: "1px solid #101A30",
|
|
backgroundColor: currentPage === totalPages ? "#fff" : "#fff",
|
|
color: "#101A30",
|
|
fontSize: "18px",
|
|
fontWeight: "700",
|
|
cursor: currentPage === totalPages ? "not-allowed" : "pointer",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
transition: "all 0.3s ease",
|
|
opacity: currentPage === totalPages ? 0.5 : 1
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
if (currentPage !== totalPages) {
|
|
e.target.style.backgroundColor = "#bc0000";
|
|
e.target.style.color = "#fff";
|
|
e.target.style.borderColor = "#bc0000";
|
|
}
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
if (currentPage !== totalPages) {
|
|
e.target.style.backgroundColor = "#fff";
|
|
e.target.style.color = "#101A30";
|
|
e.target.style.borderColor = "#101A30";
|
|
}
|
|
}}
|
|
>
|
|
<i className="fas fa-angle-double-right"></i>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|