text: import React from 'react'
  import styled from 'styled-components'
  import { StaticQuery, Link, graphql } from 'gatsby'
  
  const Post = styled.article`
    box-shadow: 0px 3px 10px rgba(25, 17, 34, 0.05);
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    a {
      color: #000;
      text-decoration: none;
    }
    p {
      font-size: 0.8rem;
    }
    h2 {
      margin-bottom: 0;
    }
    .read-more {
      font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
        Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
      font-size: 0.8rem;
      text-decoration: underline;
      color: #524763;
    }
  `
  
  const Listing = () => (
    <StaticQuery
      query={graphql`
        query Listing {
          allMarkdownRemark(
            limit: 5
            sort: { fields: [frontmatter___date], order: DESC }
          ) {
            edges {
              node {
                excerpt
                frontmatter {
                  slug
                  title
                  date(formatString: "MMMM DD, YYYY")
                }
              }
            }
          }
        }
      `}
      render={data => (
        <div>
          {data.allMarkdownRemark.edges.map(
            ({
              node: {
                frontmatter: { slug, title, date },
                excerpt,
              },
            }) => (
              <Post key={slug}>
                <h1>
                  <Link to={`/posts${slug}`}>{title}</Link>
                </h1>
                <p>{date}</p>
                <p>{excerpt}</p>
                <Link className="read-more" to={`/posts${slug}`}>
                  Read More
                </Link>
              </Post>
            )
          )}
        </div>
      )}
    />
  )
  
  export default Listing
  