46 lines
1.0 KiB
TypeScript
46 lines
1.0 KiB
TypeScript
import { useMemo, useState } from 'react';
|
|
|
|
import { Button } from './ui/button';
|
|
|
|
export function usePagination(take = 100) {
|
|
const [skip, setSkip] = useState(0);
|
|
return useMemo(
|
|
() => ({
|
|
skip,
|
|
next: () => setSkip((p) => p + take),
|
|
prev: () => setSkip((p) => Math.max(p - take)),
|
|
take,
|
|
canPrev: skip > 0,
|
|
canNext: true,
|
|
page: skip / take + 1,
|
|
}),
|
|
[skip, setSkip, take]
|
|
);
|
|
}
|
|
|
|
export type PaginationProps = ReturnType<typeof usePagination>;
|
|
|
|
export function Pagination(props: PaginationProps) {
|
|
return (
|
|
<div className="flex select-none items-center justify-end gap-2">
|
|
<div className="font-medium text-xs">Page: {props.page}</div>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => props.prev()}
|
|
disabled={!props.canPrev}
|
|
>
|
|
Previous
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => props.next()}
|
|
disabled={!props.canNext}
|
|
>
|
|
Next
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|