refactor: Update NavArrows component to use IconButton

Blobscan · Sep 4, 2024 · af00b62 · af00b62
1 parent e8c8747
commit af00b62
Showing 1 changed file with 16 additions and 13 deletions.
diff --git a/apps/web/src/components/NavArrows.tsx b/apps/web/src/components/NavArrows.tsx
@@ -1,6 +1,8 @@
 import { useRouter } from "next/router";
 import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
 
+import { IconButton } from "./IconButton";
+
 export function NavArrows({ next, prev }: { next?: string; prev?: string }) {
   return (
     <div className="flex items-center justify-center gap-1">
@@ -14,30 +16,31 @@ function NavArrow({ type, href }: { type: "next" | "prev"; href?: string }) {
   const router = useRouter();
 
   return (
-    <button
+    <IconButton
       onClick={() => {
         if (href) {
           router.push(href);
         }
       }}
       className={`
-            dark:bg-neutral-850 
-            bg-border-border-dark
-            rounded-md 
-            border 
-            border-border-light
-            bg-white
-            p-1
-            dark:border-border-dark
-            dark:bg-border-dark
-            ${href ? "" : "cursor-default opacity-50"}
-        `}
+          dark:bg-neutral-850
+          bg-border-border-dark
+          rounded-md
+          border
+          border-border-light
+          bg-white
+          p-1
+          dark:border-border-dark
+          dark:bg-border-dark
+          ${href ? "" : "cursor-default opacity-50"}
+      `}
+      disabled={!href}
     >
       {type === "next" ? (
         <ChevronRightIcon className="h-4 w-4" />
       ) : (
         <ChevronLeftIcon className="h-4 w-4" />
       )}
-    </button>
+    </IconButton>
   );
 }