refactor: extract table pagination into reusable component

components/Table/Pagination.tsx

@@ -0,0 +1,81 @@
+import { Box, Flex } from "@livepeer/design-system";
+import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons";
+
+type PaginationProps = {
+  currentPage: number;
+  totalPages: number;
+  canPrevious: boolean;
+  canNext: boolean;
+  onPrevious: () => void;
+  onNext: () => void;
+  css?: object;
+};
+
+const Pagination = ({
+  currentPage,
+  totalPages,
+  canPrevious,
+  canNext,
+  onPrevious,
+  onNext,
+  css,
+}: PaginationProps) => {
+  if (totalPages <= 0) return null;
+
+  return (
+    <Flex
+      css={{
+        paddingTop: "$4",
+        paddingBottom: "$4",
+        alignItems: "center",
+        justifyContent: "center",
+        ...css,
+      }}
+    >
+      <Box
+        aria-label="Previous Page"
+        as="button"
+        type="button"
+        css={{
+          background: "none",
+          border: "none",
+          cursor: "pointer",
+          color: canPrevious ? "$primary11" : "$hiContrast",
+          opacity: canPrevious ? 1 : 0.5,
+        }}
+        onClick={() => {
+          if (canPrevious) {
+            onPrevious();
+          }
+        }}
+      >
+        <ArrowLeftIcon />
+      </Box>
+      <Box css={{ fontSize: "$2", marginLeft: "$3", marginRight: "$3" }}>
+        Page <Box as="span">{currentPage}</Box> of{" "}
+        <Box as="span">{totalPages}</Box>
+      </Box>
+      <Box
+        aria-label="Next Page"
+        as="button"
+        type="button"
+        css={{
+          background: "none",
+          border: "none",
+          cursor: "pointer",
+          color: canNext ? "$primary11" : "$hiContrast",
+          opacity: canNext ? 1 : 0.5,
+        }}
+        onClick={() => {
+          if (canNext) {
+            onNext();
+          }
+        }}
+      >
+        <ArrowRightIcon />
+      </Box>
+    </Flex>
+  );
+};
+
+export default Pagination;

components/Table/index.tsx

@@ -8,12 +8,7 @@ import {
   Thead,
   Tr,
 } from "@livepeer/design-system";
-import {
-  ArrowLeftIcon,
-  ArrowRightIcon,
-  ChevronDownIcon,
-  ChevronUpIcon,
-} from "@radix-ui/react-icons";
+import { ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons";
 import { ReactNode } from "react";
 import {
   Column,
@@ -26,6 +21,8 @@ import {
   useTable,
 } from "react-table";
 
+import Pagination from "./Pagination";
+
 function DataTable<T extends object>({
   heading = null,
   input = null,
@@ -243,45 +240,14 @@ function DataTable<T extends object>({
               </Tbody>
             </Table>
           </Box>
-          <Flex
-            css={{
-              paddingTop: "$4",
-              paddingBottom: "$4",
-              alignItems: "center",
-              justifyContent: "center",
-            }}
-          >
-            <Box
-              as={ArrowLeftIcon}
-              css={{
-                cursor: "pointer",
-                color: canPreviousPage ? "$primary11" : "$hiContrast",
-                opacity: canPreviousPage ? 1 : 0.5,
-              }}
-              onClick={() => {
-                if (canPreviousPage) {
-                  previousPage();
-                }
-              }}
-            />
-            <Box css={{ fontSize: "$2", marginLeft: "$3", marginRight: "$3" }}>
-              Page <Box as="span">{pageIndex + 1}</Box> of{" "}
-              <Box as="span">{pageCount}</Box>
-            </Box>
-            <Box
-              as={ArrowRightIcon}
-              css={{
-                cursor: "pointer",
-                color: canNextPage ? "$primary11" : "$hiContrast",
-                opacity: canNextPage ? 1 : 0.5,
-              }}
-              onClick={() => {
-                if (canNextPage) {
-                  nextPage();
-                }
-              }}
-            />
-          </Flex>
+          <Pagination
+            currentPage={pageIndex + 1}
+            totalPages={pageCount}
+            canPrevious={canPreviousPage}
+            canNext={canNextPage}
+            onPrevious={previousPage}
+            onNext={nextPage}
+          />
         </>
       </Box>
     </>