From 18b8a55049b1a33949b828b929cff93505ad1677 Mon Sep 17 00:00:00 2001
From: Priyanshu Kumar <priyanshuknp444@gmail.com>
Date: Thu, 6 Feb 2025 01:28:13 +0530
Subject: [PATCH] fix pagination: mobile view

---
 components/buttons/Button.tsx        |  2 +-
 components/pagination/Pagination.tsx | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/components/buttons/Button.tsx b/components/buttons/Button.tsx
index e19093238ebc..261f992f4a4f 100644
--- a/components/buttons/Button.tsx
+++ b/components/buttons/Button.tsx
@@ -8,7 +8,7 @@ type IButtonProps = {
   // eslint-disable-next-line prettier/prettier
 
   /** The text to be displayed on the button. */
-  text: string;
+  text: string | React.ReactNode;
 
   /** The type of the button. Defaults to 'button'. */
   type?: ButtonType;
diff --git a/components/pagination/Pagination.tsx b/components/pagination/Pagination.tsx
index 03d2416b3d2b..99c1a80c9624 100644
--- a/components/pagination/Pagination.tsx
+++ b/components/pagination/Pagination.tsx
@@ -51,17 +51,17 @@ export default function Pagination({ totalPages, currentPage, onPageChange }: Pa
       pages.push(i);
     }
 
-    if (currentPage < totalPages - 2) {
-      pages.push('ellipsis2');
-    }
-
     pages.push(totalPages);
 
     return pages;
   };
 
   return (
-    <nav role='navigation' aria-label='Pagination' className='font-inter flex items-center justify-center gap-8'>
+    <nav
+      role='navigation'
+      aria-label='Pagination'
+      className='font-inter flex min-w-[326px] items-center justify-center md:gap-8'
+    >
       {/* Previous button */}
       <Button
         onClick={() => handlePageChange(currentPage - 1)}
@@ -69,7 +69,7 @@ export default function Pagination({ totalPages, currentPage, onPageChange }: Pa
         className={`font-normal flex h-[34px] items-center justify-center rounded bg-white px-3 py-[7px] text-sm leading-[17px] tracking-[-0.01em] ${
           currentPage === 1 ? 'hover:bg-gray-white cursor-not-allowed text-gray-300' : 'text-[#141717] hover:bg-gray-50'
         }`}
-        text='Previous'
+        text={<span className='hidden md:inline'>Previous</span>}
         icon={<IconPrevious />}
         iconPosition={ButtonIconPosition.LEFT}
         aria-label='Go to previous page'
@@ -108,7 +108,7 @@ export default function Pagination({ totalPages, currentPage, onPageChange }: Pa
             ? 'hover:bg-gray-white cursor-not-allowed text-gray-300'
             : 'text-[#141717] hover:bg-gray-50'
         }`}
-        text='Next'
+        text={<span className='hidden md:inline'>Next</span>}
         icon={<IconNext />}
         aria-label='Go to next page'
       />