45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
import { ButtonGroup, Pagination as ChakraPagination, IconButton } from '@chakra-ui/react';
|
|
import { LuChevronLeft, LuChevronRight } from 'react-icons/lu';
|
|
|
|
export function Pagination({
|
|
total,
|
|
page,
|
|
setPage,
|
|
pageSize = 5
|
|
}: {
|
|
total: number;
|
|
page: number;
|
|
setPage: (value: number) => void;
|
|
pageSize?: number;
|
|
setPageSize?: (value: number) => void;
|
|
}) {
|
|
return (
|
|
<ChakraPagination.Root
|
|
count={total}
|
|
page={page}
|
|
pageSize={pageSize}
|
|
onPageChange={e => setPage(e.page)}
|
|
defaultPage={1}
|
|
>
|
|
<ButtonGroup variant="ghost" size="sm">
|
|
<ChakraPagination.PrevTrigger asChild>
|
|
<IconButton>
|
|
<LuChevronLeft />
|
|
</IconButton>
|
|
</ChakraPagination.PrevTrigger>
|
|
|
|
<ChakraPagination.Items
|
|
render={page => (
|
|
<IconButton variant={{ base: 'ghost', _selected: 'solid' }}>{page.value}</IconButton>
|
|
)}
|
|
/>
|
|
|
|
<ChakraPagination.NextTrigger asChild>
|
|
<IconButton>
|
|
<LuChevronRight />
|
|
</IconButton>
|
|
</ChakraPagination.NextTrigger>
|
|
</ButtonGroup>
|
|
</ChakraPagination.Root>
|
|
);
|
|
}
|