{"size": 1240, "ext": "js", "max_stars_repo_path": "git-going-frontend/src/components/layouts/AboutCarousel.js", "max_stars_repo_name": "Swhite9478/Git-Going", "max_stars_repo_stars_event_min_datetime": "2020-02-09T08:11:01.000Z", "max_stars_repo_stars_event_max_datetime": "2020-02-09T08:11:01.000Z", "max_issues_repo_path": "git-going-frontend/src/components/layouts/AboutCarousel.js", "max_issues_repo_name": "Swhite9478/Git-Going", "max_issues_repo_issues_event_min_datetime": "2021-06-02T01:01:57.000Z", "max_issues_repo_issues_event_max_datetime": "2021-06-02T01:01:57.000Z", "max_forks_repo_path": "git-going-frontend/src/components/layouts/AboutCarousel.js", "max_forks_repo_name": "Swhite9478/Git-Going", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": 1, "max_forks_count": null, "avg_line_length": 24.3137254902, "max_line_length": 73, "alphanum_fraction": 0.6193548387}
import React from "react";
import { Carousel } from "react-responsive-carousel";
import minedRepos from "../../assets/minedRepos.png";
import tableImage from "../../assets/minedRepoTable.png";
import visualization1 from "../../assets/git-oss-um-visualization-1.png";
import visualization2 from "../../assets/git-oss-um-linechart-2.png";
import capstoneLogo from "../../assets/CapstoneLogo300.jpg";
import styled from "styled-components";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  carouselImage: {
     height: '100%',
      position: 'absolute',
      margin: 'auto 0',
      top: '0px',
      left: '0px',
      float: 'left'
  }
}));

export default () =>{ 
  const classes = useStyles();
  return (
  <Carousel
    autoPlay
    infiniteLoop
    showThumbs={false}
    showStatus={false}
    transitionTime={350}
    interval={5000}
    useKeyboardArrows
  >
    <div>
      <img src={capstoneLogo} className={classes.carouselImage} />
    </div>
    <div>
      <img src={minedRepos} />
    </div>
    <div>
      <img src={tableImage} />
    </div>
    <div>
      <img src={visualization1} />
    </div>
    <div>
      <img src={visualization2} />
    </div>
  </Carousel>
);}
