From 4427c2efc0832dd6fffc6322925e2d21fd63f781 Mon Sep 17 00:00:00 2001
From: haraldnilsen <harald_998@hotmail.com>
Date: Tue, 5 Sep 2023 13:16:24 +0200
Subject: [PATCH] :lipstick: added background when selected page in pagination

Co-authored-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
---
 src/components/Pagination/index.tsx       | 1 +
 src/components/PaginationButton/index.tsx | 8 +++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/Pagination/index.tsx b/src/components/Pagination/index.tsx
index c8c74cc..468c448 100644
--- a/src/components/Pagination/index.tsx
+++ b/src/components/Pagination/index.tsx
@@ -64,6 +64,7 @@ const Pagination: React.FC<PaginationProps> = ({
               <PaginationButton
                 pageNumber={page}
                 handlePageChange={handlePageChange}
+                isCurrentPage={page === currentPage}
               />
             </q.div>
           ))}
diff --git a/src/components/PaginationButton/index.tsx b/src/components/PaginationButton/index.tsx
index d010e1e..b6f2b79 100644
--- a/src/components/PaginationButton/index.tsx
+++ b/src/components/PaginationButton/index.tsx
@@ -2,17 +2,23 @@ import q from 'qjuul'
 
 interface PaginationButtonProps {
   pageNumber: number
+  isCurrentPage?: boolean
   handlePageChange: (pageNumber: number) => void
 }
 
 const PaginationButton: React.FC<PaginationButtonProps> = ({
   pageNumber,
   handlePageChange,
+  isCurrentPage,
 }) => {
   return (
     <q.div
       onClick={() => handlePageChange(pageNumber)}
-      className="bg-red-400 p-2 rounded-md hover:cursor-pointer"
+      className={
+        isCurrentPage
+          ? 'bg-red-600 p-2 rounded-md hover:cursor-pointer'
+          : 'bg-red-400 p-2 rounded-md hover:cursor-pointer'
+      }
     >
       <p>{pageNumber}</p>
     </q.div>