Blog page pagenation updated
This commit is contained in:
akash
parent
38ddf7b1da
commit
b62640738b
@ -1,7 +1,7 @@
|
||||
|
||||
import Layout from "@/components/layout/Layout";
|
||||
import Link from "next/link";
|
||||
import Blogs from "@/utils/Blog.utils";
|
||||
import BlogList from "@/components/blog/BlogList";
|
||||
|
||||
export const metadata = {
|
||||
title: "Rapharehab Blog – Wellness Tips & Rehab Insights",
|
||||
@ -18,46 +18,7 @@ export default function Blog() {
|
||||
<h2>Stay Updated with <br />Our Recent Blog Posts</h2>
|
||||
</div>
|
||||
|
||||
<div className="row clearfix">
|
||||
{Blogs.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">
|
||||
{/* <ul className="post-info mb_15 clearfix">
|
||||
<li><Link href="#">{blog.author}</Link></li>
|
||||
<li>{blog.date}</li>
|
||||
<li>{blog.comments}</li>
|
||||
</ul> */}
|
||||
<h3>
|
||||
{/* <Link href={`/blog/${blog.slug}`} aria-label="Our Blog Title">
|
||||
{blog.title.split(" ").length > 5
|
||||
? blog.title.split(" ").slice(0, 5).join(" ") + "..."
|
||||
: blog.title}
|
||||
</Link> */}
|
||||
<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>
|
||||
<BlogList blogs={Blogs} />
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
216
components/blog/BlogList.js
Normal file
216
components/blog/BlogList.js
Normal file
@ -0,0 +1,216 @@
|
||||
"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>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user