feat: add responsive pagination to blogs page

Author: vaishnavibanthe

src/pages/blogs/blogs-new.css

@@ -2184,6 +2184,112 @@
   left: 0;
 }
 
+.pagination-wrapper {
+  margin-top: 3rem;
+}
+
+.pagination-container {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: 24px;
+  width: 100%;
+}
+
+.pagination-pages {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.pagination-btn,
+.pagination-number {
+  min-width: 34px;
+  height: 34px;
+  padding: 0 12px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  border: 1px solid #e5e7eb;
+  background: white;
+  color: #111827;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.pagination-btn {
+  min-width: 78px;
+}
+
+.pagination-btn:first-child {
+  justify-self: start;
+}
+
+.pagination-btn:last-child {
+  justify-self: end;
+}
+
+.pagination-btn:hover,
+.pagination-number:hover {
+  border-color: #9ca3af;
+  color: #111827;
+}
+
+.active-page {
+  background: #475569;
+  color: white;
+  border-color: #475569;
+}
+
+.pagination-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.pagination-ellipsis {
+  color: #9ca3af;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 34px;
+  padding: 0 2px;
+}
+
+.pagination-summary {
+  color: #6b7280;
+  font-size: 12px;
+  margin: 14px 0 0;
+  text-align: center;
+}
+
+@media (max-width: 640px) {
+  .pagination-container {
+    grid-template-columns: 1fr;
+    gap: 8px;
+  }
+
+  .pagination-pages {
+    order: -1;
+    flex-wrap: wrap;
+  }
+
+  .pagination-btn,
+  .pagination-number {
+    min-width: 32px;
+    height: 32px;
+    font-size: 12px;
+    padding: 0 10px;
+  }
+
+  .pagination-btn {
+    width: 100%;
+  }
+}
+
 /* Responsive read more button */
 @media (max-width: 767px) and (min-width: 576px) {
   .card-read-more {

src/pages/blogs/index.tsx

@@ -13,6 +13,8 @@ export default function Blogs() {
   const [searchInput, setSearchInput] = React.useState("");
   const [searchTerm, setSearchTerm] = React.useState("");
   const [filteredBlogs, setFilteredBlogs] = React.useState(blogs);
+  const POSTS_PER_PAGE = 8;
+  const [currentPage, setCurrentPage] = React.useState(1);
 
   // Filter blogs after the user submits the blog search form.
   React.useEffect(() => {
@@ -31,8 +33,28 @@ export default function Blogs() {
     }
 
     setFilteredBlogs(filtered);
+    setCurrentPage(1);
   }, [searchTerm]);
 
+  React.useEffect(() => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  }, [currentPage]);
+
+  const totalPages = Math.ceil(filteredBlogs.length / POSTS_PER_PAGE);
+  const startIndex = (currentPage - 1) * POSTS_PER_PAGE;
+  const endIndex = startIndex + POSTS_PER_PAGE;
+  const currentBlogs = filteredBlogs.slice(startIndex, endIndex);
+  const visiblePages = Array.from(
+    { length: Math.min(totalPages, 5) },
+    (_, index) => index + 1,
+  );
+  const showLastPage = totalPages > 5;
+  const showingStart = filteredBlogs.length === 0 ? 0 : startIndex + 1;
+  const showingEnd = Math.min(endIndex, filteredBlogs.length);
+
   const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
     setSearchInput(e.target.value);
   };
@@ -156,7 +178,7 @@ export default function Blogs() {
 
               <div className="articles-grid">
                 {filteredBlogs.length > 0 ? (
-                  filteredBlogs.map((blog) => (
+                  currentBlogs.map((blog) => (
                     <BlogCard key={blog.id ?? blog.slug} blog={blog} />
                   ))
                 ) : (
@@ -177,6 +199,62 @@ export default function Blogs() {
                   </div>
                 )}
               </div>
+
+              {filteredBlogs.length > POSTS_PER_PAGE && (
+                <div className="pagination-wrapper">
+                  <div className="pagination-container">
+                    <button
+                      className="pagination-btn"
+                      disabled={currentPage === 1}
+                      aria-label="Go to previous page"
+                      onClick={() => setCurrentPage((prev) => prev - 1)}
+                    >
+                      Previous
+                    </button>
+
+                    <div className="pagination-pages">
+                      {visiblePages.map((page) => (
+                        <button
+                          key={page}
+                          className={`pagination-number ${currentPage === page ? "active-page" : ""
+                            }`}
+                          aria-label={`Go to page ${page}`}
+                          onClick={() => setCurrentPage(page)}
+                        >
+                          {page}
+                        </button>
+                      ))}
+
+                      {showLastPage && (
+                        <>
+                          <span className="pagination-ellipsis">...</span>
+                          <button
+                            className={`pagination-number ${currentPage === totalPages ? "active-page" : ""
+                              }`}
+                            aria-label={`Go to page ${totalPages}`}
+                            onClick={() => setCurrentPage(totalPages)}
+                          >
+                            {totalPages}
+                          </button>
+                        </>
+                      )}
+                    </div>
+
+                    <button
+                      className="pagination-btn"
+                      disabled={currentPage === totalPages}
+                      aria-label="Go to next page"
+                      onClick={() => setCurrentPage((prev) => prev + 1)}
+                    >
+                      Next
+                    </button>
+                  </div>
+                  <p className="pagination-summary">
+                    Showing {showingStart} - {showingEnd} of{" "}
+                    {filteredBlogs.length} posts
+                  </p>
+                </div>
+              )}
             </div>
           </div>
         </section>