index.js

import React, { Component } from "react";
import { withStyles } from "@material-ui/styles";
import { AppBar, Tabs, Tab, Badge, Paper } from "@material-ui/core";
import ShoppingBasket from "@material-ui/icons/ShoppingBasketOutlined";
import AccountCircle from "@material-ui/icons/AccountCircleOutlined";
import CreditCard from "@material-ui/icons/CreditCardOutlined";
import LiveHelpIcon from "@material-ui/icons/LiveHelpOutlined";
import HelpIcon from "@material-ui/icons/HelpOutline";
import RedeemIcon from "@material-ui/icons/RedeemOutlined";
import SupervisedUserCircleOutlinedIcon from "@material-ui/icons/SupervisedUserCircleOutlined";
import MapIcon from "@material-ui/icons/MapOutlined";
import compose from "recompose/compose";
import { withRouter } from "react-router-dom";
import SpaIcon from '@material-ui/icons/Spa';
import FaceIcon from '@material-ui/icons/Face';
import RemoveRedEyeIcon from '@material-ui/icons/RemoveRedEye';
import PanToolIcon from '@material-ui/icons/PanTool';

const styles = theme => ({
  root: {
    flexGrow: 1,
    width: "100%",
    backgroundColor: theme.palette.background.paper
  },
  flex: {
    flex: 1
  },
  fab: {
    position: "absolute",
    bottom: theme.spacing(3),
    right: theme.spacing(3)
  },
  container: {
    display: "flex",
    flexWrap: "wrap"
  },
  dense: {
    marginTop: theme.spacing(2)
  },
  textField: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1)
  },
  margin: {
    margin: theme.spacing(2)
  }
});

class Dashboard extends Component {
  render() {
    const { classes, history, tab, handleChangeTab } = this.props;
    const badgeOrder = 5;
    const badgeUser = 6;
    const badgeCredit = 2;
    const badgePlace = 12;
    return (
      <div className={classes.root}>
        <AppBar position="static" color="default">
          <Tabs
            value={tab}
            onChange={(event, newValue) => {
              handleChangeTab(event, newValue);
            }}
            variant="scrollable"
            scrollButtons="on"
            indicatorColor="primary"
            textColor="primary"
            aria-label="scrollable force tabs example"
          >
            <Tab
              label="สปาและนวด"
              
              icon={
                <Badge
                  className={classes.margin}
                  //badgeContent={badgeOrder}
                  color="secondary"
                >
                  <SpaIcon/>
                  
                </Badge>
              }
              className={classes.flex}
            />
            <Tab
              label="ผิวหน้า"
              icon={
                <Badge
                  className={classes.margin}
                  //badgeContent={badgeUser}
                  color="secondary"
                >
                  <FaceIcon />
                </Badge>
              }
              className={classes.flex}
            />
            <Tab
              label="ขนตาและคิ้ว"
              icon={
                <Badge
                  className={classes.margin}
                  //badgeContent={badgeCredit}
                  color="secondary"
                >
                  <RemoveRedEyeIcon />
                </Badge>
              }
              className={classes.flex}
            />
            <Tab
              label="ทำเล็บ"
              icon={
                <Badge
                  className={classes.margin}
                  //badgeContent={badgeCredit}
                  color="secondary"
                >
                  <PanToolIcon />
                </Badge>
              }
              className={classes.flex}
            />
            <Tab
              label="ชาลอน"
              icon={
                <Badge
                  className={classes.margin}
                  //badgeContent={badgeCredit}
                  color="secondary"
                >
                  <FaceIcon />
                </Badge>
              }
              className={classes.flex}
            />
            <Tab
              label="แต่งหน้าทำผม"
              icon={
                <Badge
                  className={classes.margin}
                  //badgeContent={badgeCredit}
                  color="secondary"
                >
                  <FaceIcon />
                </Badge>
              }
              className={classes.flex}
            />
          </Tabs>
        </AppBar>
      </div>
    );
  }
}

export default compose(withStyles(styles), withRouter)(Dashboard);