feat: improve pagination button functionality and styling

- Add disabled prop to PaginationButton component
- Modify pagination button rendering to always show first/previous/next/last buttons to prevent components jumping across pages
- Disable navigation buttons when at page boundaries
- Update button styling for active and disabled states

Author: Jipperism

components/global/pagination/pagination-button.tsx

@@ -9,6 +9,7 @@ interface PaginationButtonProps {
   children: React.ReactNode;
   active?: boolean;
   onClick?: () => void;
+  disabled?: boolean;
 }
 
 export default function PaginationButton({
@@ -17,16 +18,18 @@ export default function PaginationButton({
   children,
   active,
   onClick,
+  disabled,
 }: PaginationButtonProps) {
   const buttonContent = (
     <Button
       aria-label={typeof children === "string" ? children : undefined}
       className={cn(
-        "flex items-center gap-2 border-black border-",
-        active && "bg-white text-black ",
+        "flex items-center gap-2 border-black border-2",
+        active && "bg-white text-black cursor-default hover:bg-white",
       )}
       size="sm"
       onClick={onClick}
+      disabled={disabled}
     >
       {arrow === "left" && (
         <ChevronLeft style={{ width: "10px", height: "10px" }} />
@@ -38,7 +41,7 @@ export default function PaginationButton({
     </Button>
   );
 
-  if (href) {
+  if (href && !active && !disabled) {
     return (
       <Link href={href} prefetch={true}>
         {buttonContent}

components/global/pagination/pagination.tsx

@@ -69,33 +69,45 @@ export default function Pagination({
   return (
     <div className="flex flex-col sm:flex-row gap-4 items-center justify-between w-full mt-4">
       <div className="flex items-center justify-start gap-2">
-        {pageNumber > 1 && (
-          <>
-            <PaginationButton href={getPageHref(1)} arrow="left">
-              First
-            </PaginationButton>
-            <PaginationButton href={getPageHref(pageNumber - 1)} arrow="left">
-              Previous
-            </PaginationButton>
-          </>
-        )}
+        <>
+          <PaginationButton
+            disabled={pageNumber === 1}
+            href={getPageHref(1)}
+            arrow="left"
+          >
+            First
+          </PaginationButton>
+          <PaginationButton
+            disabled={pageNumber === 1}
+            href={getPageHref(pageNumber - 1)}
+            arrow="left"
+          >
+            Previous
+          </PaginationButton>
+        </>
       </div>
 
       <div className="flex items-center justify-center gap-2">
         {renderPageNumbers()}
       </div>
 
       <div className="flex items-center justify-end gap-2">
-        {pageNumber < totalPages && (
-          <>
-            <PaginationButton href={getPageHref(pageNumber + 1)} arrow="right">
-              Next
-            </PaginationButton>
-            <PaginationButton href={getPageHref(totalPages)} arrow="right">
-              Last
-            </PaginationButton>
-          </>
-        )}
+        <>
+          <PaginationButton
+            disabled={pageNumber === totalPages}
+            href={getPageHref(pageNumber + 1)}
+            arrow="right"
+          >
+            Next
+          </PaginationButton>
+          <PaginationButton
+            disabled={pageNumber === totalPages}
+            href={getPageHref(totalPages)}
+            arrow="right"
+          >
+            Last
+          </PaginationButton>
+        </>
       </div>
     </div>
   );