import React from "react";
// nodejs library to set properties for components
import PropTypes from "prop-types";
// nodejs library that concatenates classes
import classNames from "classnames";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import styles from "assets/jss/nextjs-material-kit/components/paginationStyle.js";
const useStyles = makeStyles(styles);
export default function Pagination(props) {
const classes = useStyles();
const { pages, color } = props;
return (
{pages.map((prop, key) => {
const paginationLink = classNames({
[classes.paginationLink]: true,
[classes[color]]: prop.active,
[classes.disabled]: prop.disabled
});
return (
-
{prop.onClick !== undefined ? (
) : (
)}
);
})}
);
}
Pagination.defaultProps = {
color: "primary"
};
Pagination.propTypes = {
pages: PropTypes.arrayOf(
PropTypes.shape({
active: PropTypes.bool,
disabled: PropTypes.bool,
text: PropTypes.oneOfType([
PropTypes.number,
PropTypes.oneOf(["PREV", "NEXT", "..."])
]).isRequired,
onClick: PropTypes.func
})
).isRequired,
color: PropTypes.oneOf(["primary", "info", "success", "warning", "danger"])
};