From ca2fe121014a8251bea38e3ebd32781d9e7653a1 Mon Sep 17 00:00:00 2001
From: Dorian Niemiec <dorian.niemiec@svrjs.org>
Date: Sun, 8 Sep 2024 11:37:06 +0200
Subject: [PATCH] fix: limit pagination items to 5

---
 components/cards/BlogCards.tsx | 33 +++++++++++++++++++++++----------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/components/cards/BlogCards.tsx b/components/cards/BlogCards.tsx
index 1ca7c96..099f49e 100644
--- a/components/cards/BlogCards.tsx
+++ b/components/cards/BlogCards.tsx
@@ -56,6 +56,17 @@ const BlogCards: React.FC<BlogCardInterface> = async (props) => {
 
   const totalPages = Math.ceil(totalPosts / cardsPerPage);
 
+  let begPage = currentPage - 2;
+  let endPage = currentPage + 2;
+  if (endPage > totalPages) {
+    begPage -= endPage - totalPages;
+    endPage = totalPages;
+  }
+  if (begPage < 1) {
+    endPage += 1 - begPage;
+    begPage = 1;
+  }
+
   return (
     <>
       <section className="grid max-w-6xl gap-4 mx-auto sm:grid-cols-2 lg:grid-cols-3">
@@ -120,16 +131,18 @@ const BlogCards: React.FC<BlogCardInterface> = async (props) => {
                   <PaginationPrevious href={`/blog/page/${currentPage - 1}`} />
                 )}
               </PaginationItem>
-              {Array.from({ length: totalPages }).map((_, i) => (
-                <PaginationItem key={i}>
-                  <PaginationLink
-                    href={`/blog/page/${i + 1}`}
-                    isActive={currentPage === i + 1}
-                  >
-                    {i + 1}
-                  </PaginationLink>
-                </PaginationItem>
-              ))}
+              {Array.from({ length: totalPages > 5 ? 5 : totalPages }).map(
+                (_, i) => (
+                  <PaginationItem key={i}>
+                    <PaginationLink
+                      href={`/blog/page/${begPage + i}`}
+                      isActive={currentPage === begPage + i}
+                    >
+                      {begPage + i}
+                    </PaginationLink>
+                  </PaginationItem>
+                )
+              )}
               <PaginationItem>
                 {currentPage < totalPages && (
                   <PaginationNext href={`/blog/page/${currentPage + 1}`} />