You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
import { useIsLoading } from "@/contexts";
|
|
|
|
import { Group, Pagination, Text } from "@mantine/core";
|
|
|
|
import { FunctionComponent } from "react";
|
|
|
|
interface Props {
|
|
|
|
count: number;
|
|
|
|
index: number;
|
|
|
|
size: number;
|
|
|
|
total: number;
|
|
|
|
goto: (idx: number) => void;
|
|
|
|
}
|
|
|
|
|
|
|
|
const PageControl: FunctionComponent<Props> = ({
|
|
|
|
count,
|
|
|
|
index,
|
|
|
|
size,
|
|
|
|
total,
|
|
|
|
goto,
|
|
|
|
}) => {
|
|
|
|
const empty = total === 0;
|
|
|
|
const start = empty ? 0 : size * index + 1;
|
|
|
|
const end = Math.min(size * (index + 1), total);
|
|
|
|
|
|
|
|
const isLoading = useIsLoading();
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Group p={16} position="apart">
|
|
|
|
<Text size="sm">
|
|
|
|
Show {start} to {end} of {total} entries
|
|
|
|
</Text>
|
|
|
|
<Pagination
|
|
|
|
size="sm"
|
|
|
|
color={isLoading ? "gray" : "primary"}
|
|
|
|
page={index + 1}
|
|
|
|
onChange={(page) => goto(page - 1)}
|
|
|
|
hidden={count <= 1}
|
|
|
|
total={count}
|
|
|
|
></Pagination>
|
|
|
|
</Group>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default PageControl;
|