{"size": 1138, "ext": "js", "max_stars_repo_path": "src/components/ProjectThumbnail/ProjectThumbnail.js", "max_stars_repo_name": "ollelauribostrom/dahlstroem", "max_stars_repo_stars_event_min_datetime": "2019-03-06T08:56:56.000Z", "max_stars_repo_stars_event_max_datetime": "2019-03-06T08:56:56.000Z", "max_issues_repo_path": "src/components/ProjectThumbnail/ProjectThumbnail.js", "max_issues_repo_name": "ollelauribostrom/dahlstroem", "max_issues_repo_issues_event_min_datetime": "2021-09-21T15:46:27.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-27T10:27:51.000Z", "max_forks_repo_path": "src/components/ProjectThumbnail/ProjectThumbnail.js", "max_forks_repo_name": "ollelauribostrom/dahlstrom", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": 4, "max_forks_count": null, "avg_line_length": 28.45, "max_line_length": 79, "alphanum_fraction": 0.6485061511}
import React, {useState} from 'react';
import PropTypes from 'prop-types';
import {Link} from 'gatsby';
import Img from 'gatsby-image';

const ProjectThumbnail = ({project, hoverColor}) => {
  const [showTitle, setShowTitle] = useState (false);
  const {slug, featuredImage, title} = project;
  return (
    <Link
      className="project__thumbnail"
      to={slug}
      key={slug}
      onMouseOver={() => setShowTitle (true)}
      onMouseLeave={() => setShowTitle (false)}
    >
      <Img fluid={featuredImage.fluid} className="project__thumbnail__image" />
      {showTitle
        ? <span
            className="project__thumbnail__title"
            style={{backgroundColor: '#ff5722'}}
          >
            <span className="project__thumbnail_title__text">{title}</span>
          </span>
        : null}
    </Link>
  );
};

ProjectThumbnail.propTypes = {
  project: PropTypes.shape ({
    slug: PropTypes.string.isRequired,
    featuredImage: PropTypes.object.isRequired,
    title: PropTypes.string.isRequired,
  }).isRequired,
  hoverColor: PropTypes.shape ({hex: PropTypes.string}),
};

export default ProjectThumbnail;
