doc: create Pagination function

This commit is contained in:
Leon Xu
2022-09-03 12:49:24 -07:00
parent 5dd492df40
commit 129688fb66
+26
View File
@@ -0,0 +1,26 @@
import { Typography, Button } from '@mui/material';
import useStyles from './styles';
function Pagination({ currentPage, setPage, totalPages }) {
const classes = useStyles();
const handlePrev = () => {
if (currentPage !== 1) { setPage((prevPage) => prevPage - 1); }
};
const handleNext = () => {
if (currentPage !== totalPages) { setPage((prevPage) => prevPage + 1); }
};
if (totalPages === 0) return null;
return (
<div className={classes.container}>
<Button onClick={handlePrev} variant="contained" className={classes.button} color="primary" type="button">Prev</Button>
<Typography variant="h4" className={classes.pageNumber}>{currentPage}</Typography>
<Button onClick={handleNext} variant="contained" className={classes.button} color="primary" type="button">Next</Button>
</div>
);
}
export default Pagination;