mirror of https://github.com/kremalicious/blog.git
60 lines
1.3 KiB
TypeScript
60 lines
1.3 KiB
TypeScript
import React, { ReactElement } from 'react'
|
|
import { graphql, PageProps } from 'gatsby'
|
|
import Page from '../components/templates/Page'
|
|
import Tag from '../components/atoms/Tag'
|
|
import { tags } from './tags.module.css'
|
|
|
|
const page = {
|
|
frontmatter: {
|
|
title: 'Tags',
|
|
description: 'All the tags being used.'
|
|
}
|
|
}
|
|
|
|
interface Tag {
|
|
fieldValue: string
|
|
totalCount: number
|
|
}
|
|
|
|
interface TagsPageProps extends PageProps {
|
|
data: {
|
|
allMarkdownRemark: { group: Tag[] }
|
|
}
|
|
}
|
|
|
|
const TagsPage = (props: TagsPageProps): ReactElement => (
|
|
<Page
|
|
title={page.frontmatter.title}
|
|
post={page}
|
|
pathname={props.location.pathname}
|
|
>
|
|
<ul className={tags}>
|
|
{props.data.allMarkdownRemark.group
|
|
.sort((a, b) => b.totalCount - a.totalCount)
|
|
.map((tag: Tag) => (
|
|
<li key={tag.fieldValue}>
|
|
<Tag
|
|
name={tag.fieldValue}
|
|
url={`/archive/${tag.fieldValue}/`}
|
|
count={tag.totalCount}
|
|
style={{ fontSize: `${100 + tag.totalCount * 2}%` }}
|
|
/>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</Page>
|
|
)
|
|
|
|
export default TagsPage
|
|
|
|
export const tagsPageQuery = graphql`
|
|
{
|
|
allMarkdownRemark {
|
|
group(field: { frontmatter: { tags: SELECT } }) {
|
|
fieldValue
|
|
totalCount
|
|
}
|
|
}
|
|
}
|
|
`
|