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 | import { Box, Button, Typography } from '@mui/material';
import { FormattedMessage } from 'react-intl';
interface PaginationProps {
currentPage: number;
totalPages: number;
onPageChange: (page: number) => void;
}
function Pagination({ currentPage, totalPages, onPageChange }: PaginationProps) {
const handlePrevious = () => {
if (currentPage > 1) {
onPageChange(currentPage - 1);
}
};
const handleNext = () => {
if (currentPage < totalPages) {
onPageChange(currentPage + 1);
}
};
return (
<Box
component="nav"
role="navigation"
aria-label="Pagination"
sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 2, my: 3 }}
>
<Button
variant="outlined"
onClick={handlePrevious}
disabled={currentPage === 1}
aria-label="Previous page"
data-testid="pagination-previous"
>
<FormattedMessage id="pagination.previous" />
</Button>
<Typography variant="body1" aria-label={`Current page ${currentPage}`} aria-live="polite">
{currentPage} / {totalPages}
</Typography>
<Button
variant="outlined"
onClick={handleNext}
disabled={currentPage === totalPages}
aria-label="Next page"
data-testid="pagination-next"
>
<FormattedMessage id="pagination.next" />
</Button>
</Box>
);
}
export default Pagination;
|