80 lines
1.7 KiB
TypeScript
80 lines
1.7 KiB
TypeScript
import { Box, HStack, IconButton } from "@chakra-ui/react";
|
|
import {
|
|
BsChevronDoubleLeft,
|
|
BsChevronDoubleRight,
|
|
BsChevronLeft,
|
|
BsChevronRight,
|
|
} from "react-icons/bs";
|
|
import { usePage } from "~/utils/hooks";
|
|
|
|
const Paginator = ({
|
|
numItemsLoaded,
|
|
startIndex,
|
|
lastPage,
|
|
count,
|
|
}: {
|
|
numItemsLoaded: number;
|
|
startIndex: number;
|
|
lastPage: number;
|
|
count: number;
|
|
}) => {
|
|
const [page, setPage] = usePage();
|
|
|
|
const nextPage = () => {
|
|
if (page < lastPage) {
|
|
setPage(page + 1, "replace");
|
|
}
|
|
};
|
|
|
|
const prevPage = () => {
|
|
if (page > 1) {
|
|
setPage(page - 1, "replace");
|
|
}
|
|
};
|
|
|
|
const goToLastPage = () => setPage(lastPage, "replace");
|
|
const goToFirstPage = () => setPage(1, "replace");
|
|
|
|
return (
|
|
<HStack pt={4}>
|
|
<IconButton
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={goToFirstPage}
|
|
isDisabled={page === 1}
|
|
aria-label="Go to first page"
|
|
icon={<BsChevronDoubleLeft />}
|
|
/>
|
|
<IconButton
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={prevPage}
|
|
isDisabled={page === 1}
|
|
aria-label="Previous page"
|
|
icon={<BsChevronLeft />}
|
|
/>
|
|
<Box>
|
|
{startIndex}-{startIndex + numItemsLoaded - 1} / {count}
|
|
</Box>
|
|
<IconButton
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={nextPage}
|
|
isDisabled={page === lastPage}
|
|
aria-label="Next page"
|
|
icon={<BsChevronRight />}
|
|
/>
|
|
<IconButton
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={goToLastPage}
|
|
isDisabled={page === lastPage}
|
|
aria-label="Go to last page"
|
|
icon={<BsChevronDoubleRight />}
|
|
/>
|
|
</HStack>
|
|
);
|
|
};
|
|
|
|
export default Paginator;
|