{"size": 2092, "ext": "js", "max_stars_repo_path": "src/sections/Photography.js", "max_stars_repo_name": "AlexRogalskiy/ResumeOnTheWeb-Gatsby", "max_stars_repo_stars_event_min_datetime": "2020-04-22T05:17:19.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-20T14:34:07.000Z", "max_issues_repo_path": "src/sections/Photography.js", "max_issues_repo_name": "Rahul-Soni28/ResumeOnTheWeb-Gatsby", "max_issues_repo_issues_event_min_datetime": "2020-04-22T15:53:13.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-27T18:39:07.000Z", "max_forks_repo_path": "src/sections/Photography.js", "max_forks_repo_name": "Rahul-Soni28/ResumeOnTheWeb-Gatsby", "max_forks_repo_forks_event_min_datetime": "2020-04-22T06:59:50.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-21T08:38:22.000Z"}
{"max_stars_count": 309, "max_issues_count": 8, "max_forks_count": 79, "avg_line_length": 29.4647887324, "max_line_length": 86, "alphanum_fraction": 0.5544933078}
import { graphql, useStaticQuery } from "gatsby";
import { GatsbyImage } from "gatsby-plugin-image";
import React from "react";
import Button from "../components/Button";
import Heading from "../components/Heading";
import { AiFillInstagram, FaInstagram, FaLink } from "../components/Icons";
import * as styles from "./Photography.module.css";

const Photography = () => {
  const data = useStaticQuery(graphql`
    {
      allInstagramContent(
        sort: { fields: [timestamp], order: DESC }
        limit: 10
      ) {
        edges {
          node {
            id
            permalink
            timestamp
            localImage {
              childImageSharp {
                gatsbyImageData(width: 320, layout: CONSTRAINED, aspectRatio: 1)
              }
            }
          }
        }
      }
    }
  `);

  const openInstagramPost = permalink => window.open(permalink, "_blank");

  return (
    <section id="photography">
      <Heading icon={AiFillInstagram} title="Photography" />

      <div className={styles.container}>
        {data.allInstagramContent.edges.map(({ node }, index) => (
          <div
            key={node.id}
            className="relative cursor-pointer bg-black md:rounded-lg wow fadeIn"
            style={{
              animationDelay: `${index * 200 + 200}ms`,
            }}
            onClick={() => openInstagramPost(node.permalink)}
          >
            <div className="absolute inset-0 flex-center">
              <FaLink className="absolute" color="#FFF" size="5rem" />
            </div>
            <GatsbyImage
              alt="Photo from Instagram (@amruthpillai)"
              className="absolute inset-0 md:rounded-lg hover:opacity-50 duration-200"
              image={node.localImage.childImageSharp.gatsbyImageData}
            />
          </div>
        ))}
      </div>

      <Button
        className="mt-12"
        icon={FaInstagram}
        title="Photos on Instagram"
        onClick={() => window.open("https://pillai.xyz/instagram", "_blank")}
      />
    </section>
  );
};

export default Photography;
