import React from "react";
import { graphql } from "gatsby";
import Page from "../templates/page";

export default function Tags({ data }) {
	var siteMetadata = data.site.siteMetadata;
	var tagListItems = data.allMarkdownRemark.group.map(function(tag) {
		return (
			<li><a href={'/tags/' + tag.name}>{tag.name} ({tag.totalCount})</a></li>
		);
	});

    return (
		<Page headerInfo={siteMetadata} pageTitle="Tags">
			<p>Browse posts by tag.</p>
			<ul>
				{tagListItems}
			</ul>
		</Page>
	)
}

export const pageQuery = graphql`
    query {
    	allMarkdownRemark {
    		group(field: frontmatter___tags) {
				name: fieldValue
				totalCount
    		}
		}
		site {
			...HeaderInfo
		}
	}
`;