Pagination uses disabled prop rather than a disabled wrapper

Author: samejr

apps/webapp/app/components/primitives/LinkWithDisabled.tsx

@@ -2,8 +2,7 @@ import { ChevronRightIcon } from "@heroicons/react/24/outline";
 import { ChevronLeftIcon } from "@heroicons/react/24/solid";
 import { Link, useLocation } from "@remix-run/react";
 import { cn } from "~/utils/cn";
-import { ButtonContent } from "./Buttons";
-import { LinkDisabled } from "./LinkWithDisabled";
+import { LinkButton } from "./Buttons";
 
 export function PaginationControls({
   currentPage,
@@ -21,33 +20,37 @@ export function PaginationControls({
 
   return (
     <nav className="flex items-center gap-0.5" aria-label="Pagination">
-      <LinkDisabled
+      <LinkButton
         to={pageUrl(location, currentPage - 1)}
-        className={currentPage > 1 ? "group" : ""}
+        variant="minimal/small"
+        LeadingIcon={ChevronLeftIcon}
+        shortcut={{ key: "j" }}
+        showTooltip
+        tooltipDescription="Previous"
         disabled={currentPage === 1}
-        disabledClassName="opacity-30 cursor-default"
+        className={currentPage > 1 ? "group" : ""}
       >
-        <ButtonContent variant="minimal/small" LeadingIcon={ChevronLeftIcon}>
-          Prev
-        </ButtonContent>
-      </LinkDisabled>
+        Prev
+      </LinkButton>
 
       {showPageNumbers
         ? calculatePageLinks(currentPage, totalPages).map((page, i) => (
             <PageLinkComponent page={page} key={i} location={location} />
           ))
         : null}
 
-      <LinkDisabled
+      <LinkButton
         to={pageUrl(location, currentPage + 1)}
-        className={currentPage !== totalPages ? "group" : ""}
+        variant="minimal/small"
+        TrailingIcon={ChevronRightIcon}
+        shortcut={{ key: "k" }}
+        showTooltip
+        tooltipDescription="Next"
         disabled={currentPage === totalPages}
-        disabledClassName="opacity-30 cursor-default"
+        className={currentPage !== totalPages ? "group" : ""}
       >
-        <ButtonContent variant="minimal/small" TrailingIcon={ChevronRightIcon}>
-          Next
-        </ButtonContent>
-      </LinkDisabled>
+        Next
+      </LinkButton>
     </nav>
   );
 }