{"size": 1042, "ext": "js", "max_stars_repo_path": "frontend-master/src/components/PhotoGallery.js", "max_stars_repo_name": "mikez226/A-Cloud-and-React-Based-Social-Network-with-Go_frontend", "max_stars_repo_stars_event_min_datetime": "2022-03-14T21:27:28.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-14T21:27:28.000Z", "max_issues_repo_path": "frontend-master/src/components/PhotoGallery.js", "max_issues_repo_name": "mikez226/A-Cloud-and-React-Based-Social-Network-with-Go", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "frontend-master/src/components/PhotoGallery.js", "max_forks_repo_name": "mikez226/A-Cloud-and-React-Based-Social-Network-with-Go", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 22.652173913, "max_line_length": 52, "alphanum_fraction": 0.6055662188}
import React from 'react';
import PropTypes from "prop-types";

import Gallery from "react-grid-gallery";

function PhotoGallery(props) {
  const { images } = props;
  const imageArray = images.map( image => {
    return {
      ...image,
      customOverlay: (
        <div className="gallery-caption">
          <div>
            {`${image.user}: ${image.caption}`}
          </div>
        </div>
      )
    }
  })

  return (
    <div className="gallery-wrapper">
      <Gallery
        images={imageArray}
        enableImageSelection={false}
        backdropClosesModal={true}
      />
    </div>
  );

  PhotoGallery.propTypes = {
    images: PropTypes.arrayOf(
      PropTypes.shape({
        user: PropTypes.string.isRequired,
        caption: PropTypes.string.isRequired,
        src: PropTypes.string.isRequired,
        thumbnail: PropTypes.string.isRequired,
        thumbnailWidth: PropTypes.number.isRequired,
        thumbnailHeight: PropTypes.number.isRequired
      })
    ).isRequired
  };
}

export default PhotoGallery;
