import React from "react"; // nodejs library that concatenates classes import classNames from "classnames"; // nodejs library to set properties for components import PropTypes from "prop-types"; import SwipeableViews from "react-swipeable-views"; // @material-ui/core components import { makeStyles } from "@material-ui/core/styles"; import Tabs from "@material-ui/core/Tabs"; import Tab from "@material-ui/core/Tab"; // core components import GridContainer from "components/Grid/GridContainer.js"; import GridItem from "components/Grid/GridItem.js"; import styles from "assets/jss/nextjs-material-kit/components/navPillsStyle.js"; const useStyles = makeStyles(styles); export default function NavPills(props) { const [active, setActive] = React.useState(props.active); const handleChange = (event, active) => { setActive(active); }; const handleChangeIndex = index => { setActive(index); }; const classes = useStyles(); const { tabs, direction, color, horizontal, alignCenter } = props; const flexContainerClasses = classNames({ [classes.flexContainer]: true, [classes.horizontalDisplay]: horizontal !== undefined }); const tabButtons = ( {tabs.map((prop, key) => { var icon = {}; if (prop.tabIcon !== undefined) { icon["icon"] = ; } const pillsClasses = classNames({ [classes.pills]: true, [classes.horizontalPills]: horizontal !== undefined, [classes.pillsWithIcons]: prop.tabIcon !== undefined }); return ( ); })} ); const tabContent = (
{tabs.map((prop, key) => { return (
{prop.tabContent}
); })}
); return horizontal !== undefined ? ( {tabButtons} {tabContent} ) : (
{tabButtons} {tabContent}
); } NavPills.defaultProps = { active: 0, color: "primary" }; NavPills.propTypes = { // index of the default active pill active: PropTypes.number, tabs: PropTypes.arrayOf( PropTypes.shape({ tabButton: PropTypes.string, tabIcon: PropTypes.object, tabContent: PropTypes.node }) ).isRequired, color: PropTypes.oneOf([ "primary", "warning", "danger", "success", "info", "rose" ]), direction: PropTypes.string, horizontal: PropTypes.shape({ tabsGrid: PropTypes.object, contentGrid: PropTypes.object }), alignCenter: PropTypes.bool };