{"size": 1307, "ext": "js", "max_stars_repo_path": "src/templates/instagram-page.js", "max_stars_repo_name": "yousaiditchewie/yousaiditchewie-v2", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/templates/instagram-page.js", "max_issues_repo_name": "yousaiditchewie/yousaiditchewie-v2", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/templates/instagram-page.js", "max_forks_repo_name": "yousaiditchewie/yousaiditchewie-v2", "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": 21.0806451613, "max_line_length": 66, "alphanum_fraction": 0.5707727621}
import React from 'react';
import PropTypes from 'prop-types';
import { graphql } from 'gatsby';
import Layout from '../components/Layout';
import Gallery from '../components/Gallery';

export const InstagramPageTemplate = ({ gallery }) => {
  return (
    <section className="Instagram container">
      <Gallery imageList={gallery} />
    </section>
  );
};

InstagramPageTemplate.propTypes = {
  gallery: PropTypes.array
};

const InstagramPage = ({ data }) => {
  const { markdownRemark: post } = data;
  return (
    <Layout>
      <h1
        className="container"
        style={{
          fontSize: '1rem',
          textAlign: 'center'
        }}
      >
        Click an image to read more.
      </h1>
      <InstagramPageTemplate gallery={post.frontmatter.gallery} />
    </Layout>
  );
};

InstagramPage.propTypes = {
  data: PropTypes.object.isRequired
};

export default InstagramPage;

export const InstagramPageQuery = graphql`
  query InstagramPage($id: String!) {
    markdownRemark(id: { eq: $id }) {
      frontmatter {
        gallery {
          image {
            childImageSharp {
              fluid(maxWidth: 1040, quality: 64) {
                ...GatsbyImageSharpFluid
              }
            }
          }
          title
          linkUrl
        }
      }
    }
  }
`;
