text: import React from "react";
  import PropTypes from "prop-types";
  import { graphql, StaticQuery } from "gatsby";
  
  import Roll from "./Roll";
  
  const SportsPostsRoll = ({ data, count }) => {
    return <Roll data={data} count={count} />;
  };
  
  SportsPostsRoll.propTypes = {
    data: PropTypes.shape({
      allMarkdownRemark: PropTypes.shape({
        edges: PropTypes.array
      })
    })
  };
  
  export default () => (
    <StaticQuery
      query={graphql`
        query SportsRollQuery {
          allMarkdownRemark(
            sort: { order: DESC, fields: [frontmatter___date] }
            filter: {
              frontmatter: {
                templateKey: { eq: "sports-post" }
                active: { eq: true }
              }
            }
          ) {
            edges {
              node {
                excerpt(pruneLength: 400)
                id
                fields {
                  slug
                }
                frontmatter {
                  title
                  templateKey
                  active
                  date(formatString: "MMMM DD, YYYY")
                  featuredpost
                  featuredimage {
                    childImageSharp {
                      fluid(maxWidth: 120, quality: 100) {
                        ...GatsbyImageSharpFluid
                      }
                    }
                  }
                }
              }
            }
          }
        }
      `}
      render={(data, count) => <SportsPostsRoll data={data} count={count} />}
    />
  );
  