text: import React from "react";
  import { kebabCase } from "lodash";
  import Helmet from "react-helmet";
  import { Link, graphql } from "gatsby";
  import Layout from "../../components/Layout";
  
  const TagsPage = ({
    data: {
      allMarkdownRemark: { group },
      site: {
        siteMetadata: { title }
      }
    }
  }) => (
    <Layout>
      <section>
        <Helmet title={`Tags | ${title}`} />
        <div>
          <div>
            <div style={{ marginBottom: "6rem" }}>
              <h1>Tags</h1>
              <ul>
                {group.map(tag => (
                  <li key={tag.fieldValue}>
                    <Link to={`/tags/${kebabCase(tag.fieldValue)}/`}>
                      {tag.fieldValue} ({tag.totalCount})
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>
    </Layout>
  );
  
  export default TagsPage;
  
  export const tagPageQuery = graphql`
    query TagsQuery {
      site {
        siteMetadata {
          title
        }
      }
      allMarkdownRemark(limit: 1000) {
        group(field: frontmatter___tags) {
          fieldValue
          totalCount
        }
      }
    }
  `;
  