Add tag buttons

Author: wutali

src/components/PostList.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { PostContent } from "../lib/posts";
 import PostItem from "./PostItem";
-import Tag from "./Tag";
+import TagLink from "./TagLink";
 import Pagination from "./Pagination";
 import { TagContent } from "../lib/tags";
 
@@ -36,7 +36,7 @@ export default function PostList({ posts, tags, pagination }: Props) {
       <ul className={"categories"}>
         {tags.map((it, i) => (
           <li key={i}>
-            <Tag tag={it} />
+            <TagLink tag={it} />
           </li>
         ))}
       </ul>

src/components/TagButton.tsx

@@ -0,0 +1,29 @@
+import Link from "next/link";
+import { TagContent } from "../lib/tags";
+
+type Props = {
+  tag: TagContent;
+};
+export default function TagButton({ tag }: Props) {
+  return (
+    <>
+      <Link href={"/posts/tags/[[...slug]]"} as={`/posts/tags/${tag.slug}`}>
+        <a>{tag.name}</a>
+      </Link>
+      <style jsx>{`
+        a {
+          display: inline-block;
+          border-radius: 3px;
+          background-color: rgba(21, 132, 125, 0.2);
+          color: #15847d;
+          transition: background-color 0.3s ease;
+          padding: 0.25em 0.5em;
+        }
+        a:active,
+        a:hover {
+          background-color: rgba(21, 132, 125, 0.4);
+        }
+      `}</style>
+    </>
+  );
+}

src/components/Tag.tsx renamed to src/components/TagLink.tsx

@@ -2,19 +2,29 @@ import React from "react";
 import Layout from "../components/Layout";
 import Date from "../components/Date";
 import styles from "../../public/styles/content.module.css";
+import TagButton from "../components/TagButton";
+import { getTag } from "../lib/tags";
 
 type Props = {
   title: string;
   date: string;
+  tags: string[];
 };
-export default function Index({ title, date }: Props) {
+export default function Index({ title, date, tags }: Props) {
   return ({ children: content }) => {
     return (
       <Layout>
         <div className={"post"}>
           <h1>{title}</h1>
           <Date dateString={date} />
           <div className={styles.content}>{content}</div>
+          <ul className={"tag-list"}>
+            {tags.map((it) => (
+              <li>
+                <TagButton tag={getTag(it)} />
+              </li>
+            ))}
+          </ul>
         </div>
         <style jsx>
           {`
@@ -23,11 +33,20 @@ export default function Index({ title, date }: Props) {
               width: 100%;
               margin: 0 auto;
             }
-
             h1 {
               margin: 0 0 0.5rem;
               font-size: 2.25rem;
             }
+            .tag-list {
+              list-style: none;
+              text-align: right;
+              margin: 1.75rem 0 0 0;
+              padding: 0;
+            }
+            .tag-list li {
+              display: inline-block;
+              margin-left: 0.5rem;
+            }
           `}
         </style>
         <style global jsx>