text: import React from "react"
  import PropTypes from "prop-types"
  import Layout from "../components/layout"
  import { Tag } from "../components/Tag"
  
  // Components
  import { Link, graphql } from "gatsby"
  
  const Tags = ({ pageContext, data, location }) => {
    const { tag } = pageContext
    const { edges, totalCount } = data.allMdx
    const siteTitle = data.site.siteMetadata.title
  
    const tagHeader = `${totalCount} post${
      totalCount === 1 ? "" : "s"
    } tagged with "${tag}"`
  
    return (
      <Layout location={location} title={siteTitle}>
        <h1>{tagHeader}</h1>
        <ul>
          {edges.map(({ node }) => {
            const { slug } = node.fields
            const { title } = node.frontmatter
            return (
              <li className='mb-3' key={slug}>
                <Tag>
                  <Link to={slug}>{title}</Link>
                </Tag>
              </li>
            )
          })}
        </ul>
        {/*
                This links to a page that does not yet exist.
                We'll come back to it!
              */}
        <Link to="/tags">All tags</Link>
      </Layout>
    )
  }
  
  Tags.propTypes = {
    pageContext: PropTypes.shape({
      tag: PropTypes.string.isRequired,
    }),
    data: PropTypes.shape({
      allMdx: PropTypes.shape({
        totalCount: PropTypes.number.isRequired,
        edges: PropTypes.arrayOf(
          PropTypes.shape({
            node: PropTypes.shape({
              frontmatter: PropTypes.shape({
                title: PropTypes.string.isRequired,
              }),
              fields: PropTypes.shape({
                slug: PropTypes.string.isRequired,
              }),
            }),
          }).isRequired
        ),
      }),
    }),
  }
  
  export default Tags
  
  export const pageQuery = graphql`
    query($tag: String) {
      site {
        siteMetadata {
          title
          author
        }
      }
      allMdx(
        limit: 2000
        sort: { fields: [frontmatter___date], order: DESC }
        filter: { frontmatter: { tags: { in: [$tag] } } }
      ) {
        totalCount
        edges {
          node {
            fields {
              slug
            }
            frontmatter {
              title
            }
          }
        }
      }
    }
  `
  