Refactor: Split components

frontend/components/NoteCard.vue

@@ -5,21 +5,27 @@
         </v-card-title>
         <v-card-text> Last updated {{ prettyDate }} </v-card-text>
         <v-card-actions>
-            <div class="tags">
-                <v-chip v-for="tag in tags" :key="tag" active color="secondary">
-                    {{ tag }}
-                </v-chip>
-            </div>
+            <TagsGroup :tags="tags" />
+            <v-spacer />
+            <v-btn text color="accent" @click="$router.push(`/notes/${uuid}`)"
+                >View</v-btn
+            >
         </v-card-actions>
     </v-card>
 </template>
 
 <script>
 import { format } from 'timeago.js'
+import TagsGroup from '@/components/TagsGroup'
 
 export default {
-    name: 'Note',
+    name: 'NoteCard',
+    components: { TagsGroup },
     props: {
+        uuid: {
+            type: String,
+            required: true,
+        },
         title: {
             type: String,
             required: true,
@@ -40,17 +46,3 @@ export default {
     },
 }
 </script>
-
-<style>
-.tags {
-    padding: 16px;
-}
-
-.tags .v-chip {
-    margin: 4px 8px 4px 0;
-}
-
-.v-card.hover {
-    cursor: pointer;
-}
-</style>

frontend/components/TagsGroup.vue

@@ -0,0 +1,27 @@
+<template>
+    <div class="tags">
+        <v-chip v-for="tag in tags" :key="tag" active color="secondary">
+            {{ tag }}
+        </v-chip>
+    </div>
+</template>
+<script>
+export default {
+    name: 'TagsGroup',
+    props: {
+        tags: {
+            type: Array,
+            required: true,
+        },
+    },
+}
+</script>
+<style scoped>
+.tags {
+    padding: 16px;
+}
+
+.tags .v-chip {
+    margin: 4px 8px 4px 0;
+}
+</style>