diff --git a/components/Table/Pagination.tsx b/components/Table/Pagination.tsx new file mode 100644 index 00000000..5a8ee131 --- /dev/null +++ b/components/Table/Pagination.tsx @@ -0,0 +1,67 @@ +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) => { + return ( + + { + if (canPrevious) { + onPrevious(); + } + }} + /> + + Page {currentPage} of{" "} + {totalPages} + + { + if (canNext) { + onNext(); + } + }} + /> + + ); +}; + +export default Pagination; diff --git a/components/Table/index.tsx b/components/Table/index.tsx index db3eddcf..a58a2d7b 100644 --- a/components/Table/index.tsx +++ b/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({ heading = null, input = null, @@ -243,45 +240,14 @@ function DataTable({ - - { - if (canPreviousPage) { - previousPage(); - } - }} - /> - - Page {pageIndex + 1} of{" "} - {pageCount} - - { - if (canNextPage) { - nextPage(); - } - }} - /> - + diff --git a/components/Votes/VoteTable/Views/MobileVoteTable.tsx b/components/Votes/VoteTable/Views/MobileVoteTable.tsx index badee3ef..b322c2ba 100644 --- a/components/Votes/VoteTable/Views/MobileVoteTable.tsx +++ b/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,14 @@ export const MobileVoteCards: React.FC = (props) => { {/* Pagination */} {totalPages > 1 && ( - - - - Page {currentPage} of {totalPages} - - - + 1} + canNext={currentPage < totalPages} + onPrevious={() => onPageChange?.(currentPage - 1)} + onNext={() => onPageChange?.(currentPage + 1)} + /> )} ); diff --git a/components/Votes/VoteTable/Views/VoteItem.tsx b/components/Votes/VoteTable/Views/VoteItem.tsx index b949b97e..f94c508e 100644 --- a/components/Votes/VoteTable/Views/VoteItem.tsx +++ b/components/Votes/VoteTable/Views/VoteItem.tsx @@ -106,12 +106,7 @@ function MobileVoteView({ vote, onSelect, formatWeight }: VoteViewProps) { padding: "2px 8px", margin: "-2px -8px", borderRadius: "6px", - transition: "all 0.2s ease", - "&:hover": { - backgroundColor: "$neutral4", - textDecoration: "underline", - textUnderlineOffset: "4px", - }, + cursor: "pointer", "&:focus-visible": { outline: "2px solid $primary11", outlineOffset: "2px", @@ -183,18 +178,9 @@ function MobileVoteView({ vote, onSelect, formatWeight }: VoteViewProps) { backgroundColor: "transparent", padding: "$2", margin: "-$2", - borderRadius: "$1", minHeight: "44px", fontSize: "$1", fontWeight: 600, - transition: "background-color 0.2s ease", - "&:hover": { - backgroundColor: "$neutral3", - }, - "&:focus-visible": { - outline: "2px solid $primary11", - outlineOffset: "2px", - }, }} >