text: import React from 'react'
  import { Link, graphql } from 'gatsby'
  import Masonry from 'react-masonry-component'
  import Img from 'gatsby-image'
  import Layout from "../components/layout"
  
  const IndexPage = ({ data }) => (
    <Layout>
      {/* <Masonry className="showcase">
        {data.allDatoCmsWork.edges.map(({ node: work }) => (
          <div key={work.id} className="showcase__item">
            <figure className="card">
              <Link to={`/works/${work.slug}`} className="card__image">
                <Img fluid={work.coverImage.fluid} />
              </Link>
              <figcaption className="card__caption">
                <h6 className="card__title">
                  <Link to={`/works/${work.slug}`}>{work.title}</Link>
                </h6>
                <div className="card__description">
                  <p>{work.excerpt}</p>
                </div>
              </figcaption>
            </figure>
          </div>
        ))}
      </Masonry> */}
      <Masonry className="showcase">
        {data.allDatoCmsLesson.edges.map(({ node: lesson }) => (
          <div key={lesson.id} className="showcase__item">
            <figure className="card">
              {lesson.coverImageUrl ? 
              <Link to={`/lessons/${lesson.slug}`} className="card__image">
                <img src={lesson.coverImageUrl} />
              </Link>            
              :             
              <Link to={`/lessons/${lesson.slug}`} className="card__image">
                {lesson.coverImage ? <Img fluid={lesson.coverImage.fluid} /> : <br/> }           
              </Link> 
              }
  
              <figcaption className="card__caption">
                <h6 className="card__title">
                  <Link to={`/lessons/${lesson.slug}`}>{lesson.title}</Link>
                </h6>
                <div className="card__description">
                  <p>{lesson.excerpt}</p>
                </div>
              </figcaption>
            </figure>
          </div>
        ))}
      </Masonry>
    </Layout>
  )
  
  export default IndexPage
  
  export const query = graphql`
    query IndexQuery {
      allDatoCmsWork(sort: { fields: [position], order: ASC }) {
        edges {
          node {
            id
            title
            slug
            excerpt
            coverImage {
              fluid(maxWidth: 450, imgixParams: { fm: "jpg", auto: "compress" }) {
                ...GatsbyDatoCmsSizes
              }
            }
          }
        }
      }
      allDatoCmsLesson(sort: { fields: [position], order: ASC }) {
        edges {
          node {
            id
            title
            slug
            excerpt
            coverImage {
              fluid(maxWidth: 450, imgixParams: { fm: "jpg", auto: "compress" }) {
                ...GatsbyDatoCmsSizes
              }
            }
            coverImageUrl
            
          }
        }
      }
    }
  `
  