{"size": 998, "ext": "js", "max_stars_repo_path": "client/src/Components/CommunityWallFilter.js", "max_stars_repo_name": "fempower-pro/news", "max_stars_repo_stars_event_min_datetime": "2019-09-09T17:30:25.000Z", "max_stars_repo_stars_event_max_datetime": "2020-10-24T14:21:25.000Z", "max_issues_repo_path": "client/src/Components/CommunityWallFilter.js", "max_issues_repo_name": "how-i-can/news", "max_issues_repo_issues_event_min_datetime": "2019-07-20T17:33:20.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-12T11:09:17.000Z", "max_forks_repo_path": "client/src/Components/CommunityWallFilter.js", "max_forks_repo_name": "fempower-pro/news", "max_forks_repo_forks_event_min_datetime": "2020-02-21T07:39:51.000Z", "max_forks_repo_forks_event_max_datetime": "2021-06-17T13:02:46.000Z"}
{"max_stars_count": 6, "max_issues_count": 28, "max_forks_count": 3, "avg_line_length": 21.6956521739, "max_line_length": 68, "alphanum_fraction": 0.5611222445}
import React, { Component } from "react";

import { withStyles } from "@material-ui/core/styles";
import Chip from "@material-ui/core/Chip";

const styles = () => ({
  filter: {
    display: "flex",
    padding: 16,
    overflowX: "scroll",
    "&::-webkit-scrollbar": {
      display: "none",
    },
    /* Adds padding to the last chip */
    "&::after": {
      content: "''",
      padding: 8 /* Half of parent container */,
    },
  },
  chip: {
    marginRight: 8,
    fontSize: "1rem",
    fontFamily: "Lato",

    "&:focus": {
      background: "#FED96E",
    },
  },
});

class CommunityWallFilter extends Component {
  render() {
    const { classes } = this.props;
    const categories = ["Discover", "Following", "Followers"];
    return (
      <div className={classes.filter}>
        {categories.map((category, i) => (
          <Chip className={classes.chip} label={category} key={i} />
        ))}
      </div>
    );
  }
}

export default withStyles(styles)(CommunityWallFilter);
