text: import React from 'react';
  import { Helmet } from 'react-helmet';
  import { Link, graphql } from 'gatsby';
  import kebabCase from 'lodash/kebabCase';
  import PropTypes from 'prop-types';
  import { Layout } from '@components';
  import styled from 'styled-components';
  import { theme, mixins, Main } from '@styles';
  const { colors, fontSizes, fonts } = theme;
  
  const StyledTagsContainer = styled(Main)`
    max-width: 1000px;
  
    h1 {
      margin-bottom: 50px;
    }
    ul {
      color: ${colors.lightSlate};
      li {
        font-size: ${fontSizes.xxl};
  
        a {
          ${mixins.inlineLink};
          color: ${colors.lightSlate};
          .count {
            color: ${colors.slate};
            font-family: ${fonts.SFMono};
            font-size: ${fontSizes.md};
          }
        }
      }
    }
  `;
  
  const TagsPage = ({
    data: {
      allMarkdownRemark: { group },
      site: {
        siteMetadata: { title },
      },
    },
    location,
  }) => (
    <Layout location={location}>
      <Helmet title={title} />
  
      <StyledTagsContainer>
        <span className="breadcrumb">
          <span className="arrow">&larr;</span>
          <Link to="/blog">All Articles</Link>
        </span>
  
        <h1>Tags</h1>
        <ul className="fancy-list">
          {group.map(tag => (
            <li key={tag.fieldValue}>
              <Link to={`/blog/tags/${kebabCase(tag.fieldValue)}/`}>
                {tag.fieldValue} <span className="count">({tag.totalCount})</span>
              </Link>
            </li>
          ))}
        </ul>
      </StyledTagsContainer>
    </Layout>
  );
  
  TagsPage.propTypes = {
    data: PropTypes.shape({
      allMarkdownRemark: PropTypes.shape({
        group: PropTypes.arrayOf(
          PropTypes.shape({
            fieldValue: PropTypes.string.isRequired,
            totalCount: PropTypes.number.isRequired,
          }).isRequired,
        ),
      }),
      site: PropTypes.shape({
        siteMetadata: PropTypes.shape({
          title: PropTypes.string.isRequired,
        }),
      }),
    }),
    location: PropTypes.object,
  };
  
  export default TagsPage;
  
  export const pageQuery = graphql`
    query {
      site {
        siteMetadata {
          title
        }
      }
      allMarkdownRemark(limit: 2000, filter: { frontmatter: { draft: { ne: true } } }) {
        group(field: frontmatter___tags) {
          fieldValue
          totalCount
        }
      }
    }
  `;
  