{"size": 711, "ext": "js", "max_stars_repo_path": "src/components/GalleryItem/GalleryItem.js", "max_stars_repo_name": "eduardoRubioG/emrose-cslate", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/GalleryItem/GalleryItem.js", "max_issues_repo_name": "eduardoRubioG/emrose-cslate", "max_issues_repo_issues_event_min_datetime": "2020-07-10T18:44:33.000Z", "max_issues_repo_issues_event_max_datetime": "2020-07-10T18:44:33.000Z", "max_forks_repo_path": "src/components/GalleryItem/GalleryItem.js", "max_forks_repo_name": "eduardoRubioG/emrose-cslate", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 1, "max_forks_count": null, "avg_line_length": 19.75, "max_line_length": 56, "alphanum_fraction": 0.6666666667}
import React from "react"
import styled from "styled-components"
import Img from "gatsby-image"

const PreviewButton = styled.button`
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  transition: transform ease-in 150ms;
  &:hover{
    transform: scale(.95);
  }
  &:focus{
    outline: none;
  }
  @media screen and (max-width: 670px){
    pointer-events: none;
  }
`

const GalleryImage = styled(Img)`
  height: 100%;
`

export default function GalleryItem(props) {
  const { index, fluidImage, onImageSelect } = props
  return (
    <PreviewButton onClick={() => onImageSelect(index)}>
      <GalleryImage fluid={fluidImage} />
    </PreviewButton>
  )
}
