79 lines
2.1 KiB
JavaScript
79 lines
2.1 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Select, HStack, Text, Box, IconButton } from '@chakra-ui/react';
|
|
import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons';
|
|
|
|
const Pagination = ({ totalItems, itemsPerPageOptions = [ 10, 15] }) => {
|
|
const [pageSize, setPageSize] = useState(itemsPerPageOptions[0]);
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
|
|
const totalPages = Math.ceil(totalItems / pageSize);
|
|
|
|
const handlePageSizeChange = (e) => {
|
|
setPageSize(Number(e.target.value));
|
|
setCurrentPage(1); // Reset to first page whenever page size changes
|
|
};
|
|
|
|
const paginationPrev = () => {
|
|
if (currentPage > 1) {
|
|
setCurrentPage(currentPage - 1);
|
|
}
|
|
};
|
|
|
|
const paginationNext = () => {
|
|
if (currentPage < totalPages) {
|
|
setCurrentPage(currentPage + 1);
|
|
}
|
|
};
|
|
|
|
const displayRange = {
|
|
start: (currentPage - 1) * pageSize + 1,
|
|
end: Math.min(currentPage * pageSize, totalItems),
|
|
};
|
|
|
|
return (
|
|
<HStack d="flex" justifyContent="flex-end" alignItems="center" >
|
|
{/* <Text className='web-text-small'>Tanami v0.1</Text> */}
|
|
|
|
<HStack>
|
|
<Select
|
|
|
|
className="pointer web-text-small"
|
|
width={"90px"}
|
|
rounded="sm"
|
|
size="sm"
|
|
value={pageSize}
|
|
onChange={handlePageSizeChange}
|
|
>
|
|
{itemsPerPageOptions.map((size) => (
|
|
<option key={size} value={size}>
|
|
{size}
|
|
</option>
|
|
))}
|
|
</Select>
|
|
<IconButton
|
|
mt={1}
|
|
size={'sm'}
|
|
rounded="sm"
|
|
icon={<ChevronLeftIcon />}
|
|
onClick={paginationPrev}
|
|
className="link pointer"
|
|
isDisabled={currentPage === 1}
|
|
/>
|
|
<Text className="web-text-medium" as={"span"}>
|
|
{displayRange.start} - {displayRange.end} of {totalItems}
|
|
</Text>
|
|
<IconButton
|
|
mt={1}
|
|
icon={<ChevronRightIcon />}
|
|
size={'sm'}
|
|
rounded="sm"
|
|
onClick={paginationNext}
|
|
className="link pointer"
|
|
isDisabled={currentPage === totalPages}
|
|
/>
|
|
</HStack>
|
|
</HStack>
|
|
);
|
|
};
|
|
|
|
export default Pagination; |