refactor: reuse data table pagination on mobile voting table

Ensure we use the data table pagination on the mobile voting widget to
ensure we have a consistent UI.

Author: rickstaa

components/Table/Pagination.tsx

@@ -0,0 +1,69 @@
+import { Box, Flex, Text } 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;
+  textSize?: "1" | "2" | "3";
+  css?: object;
+};
+
+const Pagination = ({
+  currentPage,
+  totalPages,
+  canPrevious,
+  canNext,
+  onPrevious,
+  onNext,
+  textSize = "2",
+  css,
+}: PaginationProps) => {
+  return (
+    <Flex
+      css={{
+        paddingTop: "$4",
+        paddingBottom: "$4",
+        alignItems: "center",
+        justifyContent: "center",
+        ...css,
+      }}
+    >
+      <Box
+        as={ArrowLeftIcon}
+        css={{
+          cursor: "pointer",
+          color: canPrevious ? "$primary11" : "$hiContrast",
+          opacity: canPrevious ? 1 : 0.5,
+        }}
+        onClick={() => {
+          if (canPrevious) {
+            onPrevious();
+          }
+        }}
+      />
+      <Text size={textSize} css={{ marginLeft: "$3", marginRight: "$3" }}>
+        Page <Box as="span">{currentPage}</Box> of{" "}
+        <Box as="span">{totalPages}</Box>
+      </Text>
+      <Box
+        as={ArrowRightIcon}
+        css={{
+          cursor: "pointer",
+          color: canNext ? "$primary11" : "$hiContrast",
+          opacity: canNext ? 1 : 0.5,
+        }}
+        onClick={() => {
+          if (canNext) {
+            onNext();
+          }
+        }}
+      />
+    </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,7 @@ import {
   useTable,
 } from "react-table";
 
+import Pagination from "./Pagination";
 function DataTable<T extends object>({
   heading = null,
   input = null,
@@ -243,45 +239,15 @@ 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}
+            textSize="2"
+          />
         </>
       </Box>
     </>

components/Votes/VoteTable/Views/MobileVoteTable.tsx

@@ -1,5 +1,5 @@
-import { Box, Button, Flex, Text } from "@livepeer/design-system";
-import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons";
+import Pagination from "@components/Table/Pagination";
+import { Box, Text } from "@livepeer/design-system";
 import React from "react";
 
 import { VoteTableProps } from "./DesktopVoteTable";
@@ -44,44 +44,16 @@ export const MobileVoteCards: React.FC<VoteTableProps> = (props) => {
 
       {/* Pagination */}
       {totalPages > 1 && (
-        <Flex
-          css={{
-            marginTop: "$4",
-            justifyContent: "center",
-            alignItems: "center",
-            gap: "$4",
-          }}
-        >
-          <Button
-            size="1"
-            disabled={currentPage === 1}
-            onClick={() => onPageChange?.(currentPage - 1)}
-            css={{
-              display: "flex",
-              alignItems: "center",
-              gap: "$1",
-              color: currentPage === 1 ? "$neutral8" : "$white",
-            }}
-          >
-            <ArrowLeftIcon /> Previous
-          </Button>
-          <Text css={{ fontSize: "$1", color: "$neutral11" }}>
-            Page {currentPage} of {totalPages}
-          </Text>
-          <Button
-            size="1"
-            disabled={currentPage === totalPages}
-            onClick={() => onPageChange?.(currentPage + 1)}
-            css={{
-              display: "flex",
-              alignItems: "center",
-              gap: "$1",
-              color: currentPage === totalPages ? "$neutral8" : "$white",
-            }}
-          >
-            Next <ArrowRightIcon />
-          </Button>
-        </Flex>
+        <Pagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          canPrevious={currentPage > 1}
+          canNext={currentPage < totalPages}
+          onPrevious={() => onPageChange?.(currentPage - 1)}
+          onNext={() => onPageChange?.(currentPage + 1)}
+          textSize="1"
+          css={{ marginTop: "$4", paddingTop: 0, paddingBottom: 0 }}
+        />
       )}
     </Box>
   );