{"size": 593, "ext": "js", "max_stars_repo_path": "src/components/Brick.js", "max_stars_repo_name": "swkeever/beautimage", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Brick.js", "max_issues_repo_name": "swkeever/beautimage", "max_issues_repo_issues_event_min_datetime": "2021-10-06T22:34:08.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-27T11:03:05.000Z", "max_forks_repo_path": "src/components/Brick.js", "max_forks_repo_name": "swkeever/beautimage", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 3, "max_forks_count": null, "avg_line_length": 23.72, "max_line_length": 57, "alphanum_fraction": 0.5935919056}
import React from 'react';
import { Image } from 'semantic-ui-react';
import { Link } from 'react-router-dom';
import photoType from '../types/photo';

const Brick = ({ photo }) => (
  <Link to={`/photos/${photo.id}`}>
    <Image
      srcSet={`${photo.urls.thumb} 600w, 
            ${photo.urls.small} 1000w, 
            ${photo.urls.regular} 1500w`}
      src={photo.urls.thumb}
      alt={photo.alt_description}
      size="medium"
      style={{ width: '100%', paddingBottom: '0.33rem' }}
    />
  </Link>
);

Brick.propTypes = {
  photo: photoType.isRequired,
};

export default Brick;
