Make the pagination buttons better by conditionally rendering based on amount of pages

src/components/ui/History_Drawer.tsx

@@ -19,6 +19,7 @@ import {
 import {
   Pagination,
   PaginationContent,
+  PaginationLink,
   PaginationItem,
   PaginationNext,
   PaginationPrevious,
@@ -117,6 +118,7 @@ const History_Drawer: React.FC<History_Drawer_Props> = ({ user_id }) => {
                 />
               </PaginationItem>
             )}
+            {totalPages > 10 && (
               <h3 className="text-center flex flex-row">
                 Page 
                 <h3 className="font-bold mx-1">
@@ -127,6 +129,19 @@ const History_Drawer: React.FC<History_Drawer_Props> = ({ user_id }) => {
                   {totalPages}
                 </h3>
               </h3>
+            )}
+            {totalPages <= 10 && Array.from({ length: totalPages }).map((_, idx) => (
+              <PaginationItem key={idx}>
+                <PaginationLink
+                  href="#"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    handlePageChange(idx + 1);
+                  }}
+                >{idx + 1}
+                </PaginationLink>
+              </PaginationItem>
+            ))}
             {page < totalPages && (
               <PaginationItem>
                 <PaginationNext
@@ -146,18 +161,4 @@ const History_Drawer: React.FC<History_Drawer_Props> = ({ user_id }) => {
     </DrawerContent>
   );
 };
-
 export default History_Drawer;
-// If you want to show all page numbers:
-//{Array.from({ length: totalPages }).map((_, idx) => (
-  //<PaginationItem key={idx}>
-    //<PaginationLink
-      //href="#"
-      //onClick={(e) => {
-        //e.preventDefault();
-        //handlePageChange(idx + 1);
-      //}}
-    //>{idx + 1}
-    //</PaginationLink>
-  //</PaginationItem>
-//))}