Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | import { ChevronLeftIcon, ChevronRightIcon } from "@chakra-ui/icons";
import { Stack } from "@chakra-ui/react";
import type { FunctionComponent } from "react";
import { ArrowButton } from "./ArrowButton";
import { SEARCH_ANALYTICS } from "./constants";
import { GoToPage } from "./GoToPage";
import testIds from "./testIds";
import { useUpdateSearchParam } from "./useUpdateSearchParam";
import { eventName } from "../../contexts/Analytics";
export interface PageControlsProps {
offset: number;
pageLimit: number;
}
export const PageControls: FunctionComponent<PageControlsProps> = ({
offset,
pageLimit,
}) => {
const updateSearch = useUpdateSearchParam();
const goForward =
offset < pageLimit ? () => updateSearch({ offset: offset + 1 }) : undefined;
const goBack =
offset > 0 ? () => updateSearch({ offset: offset - 1 }) : undefined;
return (
<Stack
align="center"
direction="row"
justify="space-between"
maxW="18rem"
mx="auto"
spacing={4}
w="full"
>
<ArrowButton
data-event={eventName(SEARCH_ANALYTICS.RESULTS, "Previous Page")}
data-testid={testIds.prevPage}
icon={ChevronLeftIcon}
label="Previous page button"
onClick={goBack}
/>
<GoToPage
data-event={eventName(SEARCH_ANALYTICS.RESULTS, "Go to Page")}
data-testid={testIds.goToPage}
offset={offset}
pageLimit={pageLimit}
/>
<ArrowButton
data-event={eventName(SEARCH_ANALYTICS.RESULTS, "Next Page")}
data-testid={testIds.nextPage}
icon={ChevronRightIcon}
label="Next page button"
onClick={goForward}
/>
</Stack>
);
};
|