refactor: tags page

components/templates/tags/Hero.vue

@@ -0,0 +1,24 @@
+<template>
+  <section class="hero is-info">
+    <div class="hero-body">
+      <h1 class="title is-3 has-text-centered">
+        {{ title }}
+      </h1>
+      <p class="subtitle has-text-centered">
+        {{ subTitle }}
+      </p>
+    </div>
+  </section>
+</template>
+<script lang="ts">
+import { Vue, Component, Prop } from 'nuxt-property-decorator'
+
+@Component
+export default class Hero extends Vue {
+  @Prop({ type: String })
+  title!: string
+
+  @Prop({ type: String })
+  subTitle!: string;
+}
+</script>

components/templates/tags/ListTags.vue

@@ -0,0 +1,25 @@
+<template>
+  <section class="section">
+    <div class="container">
+      <ul class="columns">
+        <li v-for="tag in tags" :key="tag" class="column">
+          <nuxt-link
+            :to="{ name: 'tags-tag', params: { tag: tag.toLowerCase() } }"
+            class="text-4xl hover:underline"
+          >
+            {{ tag }}
+          </nuxt-link>
+        </li>
+      </ul>
+    </div>
+  </section>
+</template>
+<script lang="ts">
+import { Vue, Component, Prop } from 'nuxt-property-decorator'
+
+@Component
+export default class ListTags extends Vue {
+  @Prop({ type: Array })
+  tags!: string[]
+}
+</script>