Add common tag list

src/App.vue

@@ -22,6 +22,9 @@ import PageHeader from "@/components/header/PageHeader.vue";
 import PageFooter from "@/components/footer/PageFooter.vue";
 import TagList from "@/components/tags/TagList.vue";
 
+import snippets from "@/data/snippets.json";
+import Snippet from "@/interfaces/Snippet";
+
 @Options({
     components: {
         PageHeader,
@@ -29,5 +32,20 @@ import TagList from "@/components/tags/TagList.vue";
         TagList,
     },
 })
-export default class App extends Vue {}
+export default class App extends Vue {
+    private snippets: Snippet[] = snippets;
+
+    private get commonTags() {
+        const tagCounts = this.snippets
+            .flatMap((e) => e.tags)
+            .reduce((acc: { [key: string]: number }, tag) => {
+                acc[tag] = (acc[tag] ?? 0) + 1;
+                return acc;
+            }, {});
+
+        return Object.keys(tagCounts)
+            .sort((a, b) => tagCounts[a] - tagCounts[b])
+            .slice(0, 5);
+    }
+}
 </script>

src/components/tags/TagList.vue

@@ -2,9 +2,9 @@
     <section class="snippet-common-tags">
         <h3>Common tags</h3>
         <ul class="common-tags">
-            <li>
+            <li v-for="tag in tags" :key="tag">
                 <arrow-image />
-                <a href="javascript:void(0)">Some tag</a>
+                <a href="javascript:void(0)">{{ tag }}</a>
             </li>
         </ul>
     </section>
@@ -14,11 +14,17 @@
 import { Options, Vue } from "vue-class-component";
 
 import ArrowImage from "@/components/ArrowImage.vue";
+import Snippet from "@/interfaces/Snippet";
 
 @Options({
     components: {
         ArrowImage,
     },
+    props: {
+        tags: Array,
+    },
 })
-export default class TagList extends Vue {}
+export default class TagList extends Vue {
+    private tags!: Snippet[];
+}
 </script>