{"size": 1455, "ext": "js", "max_stars_repo_path": "src/components/ImageSelector.js", "max_stars_repo_name": "jasonRPS/GatsbyMarkdownBlog", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/ImageSelector.js", "max_issues_repo_name": "jasonRPS/GatsbyMarkdownBlog", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/ImageSelector.js", "max_forks_repo_name": "jasonRPS/GatsbyMarkdownBlog", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 33.0681818182, "max_line_length": 80, "alphanum_fraction": 0.5759450172}
import React from "react"
import { ImageSelectorStyles } from "./styles/ImageSelectorStyles"
import ImageModal from "./ImageModal"

const ImageSelector = props => {
  return (
    <ImageSelectorStyles>
      <div id="container">
        <div className="thumbnails">
          <div onClick={props.changeImage} className="thumbnail-data">
            <img src={props.image1} alt={props.alt} data-image={props.image1} />
          </div>
          <div onClick={props.changeImage} className="thumbnail-data">
            <img src={props.image2} alt={props.alt} data-image={props.image2} />
          </div>
          <div onClick={props.changeImage} className="thumbnail-data">
            <img src={props.image3} alt={props.alt} data-image={props.image3} />
          </div>
          <div onClick={props.changeImage} className="thumbnail-data">
            <img src={props.image4} alt={props.alt} data-image={props.image4} />
          </div>
          <p
            onClick={props.openModal}
            style={{ fontWeight: "bold", color: "red" }}
          >
            View More
          </p>
        </div>
        <div className="large-image">
          <img src={props.imageChange} alt={props.alt} />
        </div>

        <ImageModal
          closeModal={props.closeModal}
          showModal={props.showModal}
          modalOpacity={props.modalOpacity}
        />
      </div>
    </ImageSelectorStyles>
  )
}

export default ImageSelector
