{"size": 1979, "ext": "js", "max_stars_repo_path": "src/pages/index.js", "max_stars_repo_name": "graysonhicks/gatsby-mentorship", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/pages/index.js", "max_issues_repo_name": "graysonhicks/gatsby-mentorship", "max_issues_repo_issues_event_min_datetime": "2021-03-09T22:56:37.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-26T20:14:20.000Z", "max_forks_repo_path": "src/pages/index.js", "max_forks_repo_name": "graysonhicks/gatsby-mentorship", "max_forks_repo_forks_event_min_datetime": "2019-12-14T22:35:26.000Z", "max_forks_repo_forks_event_max_datetime": "2019-12-14T22:35:26.000Z"}
{"max_stars_count": null, "max_issues_count": 7, "max_forks_count": 1, "avg_line_length": 25.0506329114, "max_line_length": 72, "alphanum_fraction": 0.428499242}
import React from "react"
import { graphql, Link } from "gatsby"

import { Grommet, Box, Heading, Text, Paragraph, Anchor } from "grommet"
import { grommet } from "grommet/themes"
import Img from "gatsby-image"

import Layout from "../components/layout"

const IndexPage = ({ data }) => {
  return (
    <Grommet theme={grommet}>
      <Layout>
        <Box direction="row" wrap={true}>
          {data.allMoviesJson.movies.map(({ movie }) => (
            <Box
              elevation="medium"
              round="medium"
              width="33%"
              overflow="hidden"
              style={{ position: "relative" }}
            >
              <Box height="small" margin={{ bottom: "small" }}>
                <Img fluid={movie.image.childImageSharp.fluid} />
              </Box>
              <Box pad="medium">
                <Heading level={2} size="small">
                  {movie.title}
                </Heading>
                <Text>
                  <Text weight="bold">ID: </Text>
                  {movie.id}
                </Text>
                <Text>
                  <Text weight="bold">Year: </Text>
                  {movie.year}
                </Text>
                <Text weight="bold">Description: </Text>
                <Paragraph>{movie.description}</Paragraph>

                <Anchor
                  as={Link}
                  to={movie.fields.slug}
                  style={{ position: "absolute", bottom: "15px" }}
                >
                  Go to Page
                </Anchor>
              </Box>
            </Box>
          ))}
        </Box>
      </Layout>
    </Grommet>
  )
}

export default IndexPage

export const query = graphql`
  {
    allMoviesJson {
      movies: edges {
        movie: node {
          title
          year
          description
          id
          fields {
            slug
          }
          image {
            ...ThumbnailFragment
          }
        }
      }
    }
  }
`
