text: import React from 'react'
  import { kebabCase } from 'lodash'
  import Helmet from 'react-helmet'
  import { Link, graphql } from 'gatsby'
  import Layout from '../../utilities/Layout'
  
  const TagsPage = ({
    data: { allMarkdownRemark: { group }, site: { siteMetadata: { title } } },
  }) => (
      <Layout>
        <section className="section">
          <Helmet title={`Tags | ${title}`} />
          <div className="container content">
            <div className="columns">
              <div
                className="column is-10 is-offset-1"
                style={{ marginBottom: '6rem' }}
              >
                <h1 className="title is-size-2 is-bold-light">Tags</h1>
                <ul className="taglist">
                  {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
        }
      }
    }
  `
  