/
tag.tsx
executable file
·53 lines (48 loc) · 1.37 KB
/
tag.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
/** @jsx jsx */
import { jsx, Heading, Flex } from "theme-ui"
import { HeadFC, Link } from "gatsby"
import Layout from "./layout"
import useMinimalBlogConfig from "../hooks/use-minimal-blog-config"
import Listing from "./listing"
import replaceSlashes from "../utils/replaceSlashes"
import Seo from "./seo"
export type MBTagProps = {
posts: {
slug: string
title: string
date: string
excerpt: string
description: string
timeToRead?: number
tags: {
name: string
slug: string
}[]
}[]
pageContext: {
isCreatedByStatefulCreatePages: boolean
slug: string
name: string
}
}
const Tag = ({ posts, pageContext }: MBTagProps) => {
const { tagsPath, basePath } = useMinimalBlogConfig()
return (
<Layout>
<Flex sx={{ alignItems: `center`, justifyContent: `space-between`, flexFlow: `wrap` }}>
<Heading as="h1" variant="styles.h1" sx={{ marginY: 2 }}>
{pageContext.name}
</Heading>
<Link
sx={(t) => ({ ...t.styles?.a, variant: `links.secondary`, marginY: 2 })}
to={replaceSlashes(`/${basePath}/${tagsPath}`)}
>
View all tags
</Link>
</Flex>
<Listing posts={posts} sx={{ mt: [4, 5] }} />
</Layout>
)
}
export default Tag
export const Head: HeadFC<unknown, { name: string }> = ({ pageContext }) => <Seo title={`Tag: ${pageContext.name}`} />