Update notes components and page, notes are coming from /notes

frontend/components/Note.vue

@@ -1,47 +1,47 @@
 <template>
-    <v-card height="100%">
-        <v-card-title>{{ title }}</v-card-title>
-        <v-card-text>
-            <slot></slot>
-        </v-card-text>
+    <v-card
+        class="d-flex flex-column"
+        :class="{ hover:hover }"
+        height="100%"
+        :color="hover ? 'blue lighten-3' : 'white'"
+        :elevation="hover ? 12 : 2"
+    >
+        <div class="mb-auto">
+            <v-card-title>{{ title }}</v-card-title>
 
-        <div class="tags">
-            <v-chip v-for="tag in tags" :key="tag" active color="secondary">{{ tag }}</v-chip>
+            <div class="tags">
+                <v-chip v-for="tag in tags" :key="tag" active color="secondary">{{ tag }}</v-chip>
+            </div>
         </div>
 
-        <v-divider class="mt-auto"></v-divider>
-
-        <v-card-actions>
-            <v-btn
-                text
-                color="deep-purple accent-4" dark>
-                <v-icon left>mdi-eye</v-icon>
-                View
-            </v-btn>
-            <v-spacer/>
-            <v-btn
-                text
-                color="deep-purple accent-4">
-                <v-icon left>mdi-pencil</v-icon>
-                Edit
-            </v-btn>
-        </v-card-actions>
+        <div class="mt-auto" v-if="!!updatedAt">
+            <v-divider/>
+            <v-card-subtitle>{{ updatedAt }}</v-card-subtitle>
+        </div>
     </v-card>
 </template>
 
 <script>
     export default {
-        name: "Note",
+        name: 'Note',
         props: {
             title: {
                 type: String,
-                required: true
+                required: true,
             },
             tags: {
-                type: Array
-            }
-        }
-    }
+                type: Array,
+            },
+            hover: {
+                type: Boolean,
+                default: 'false',
+            },
+            updatedAt: {
+                type: String,
+                default: null,
+            },
+        },
+    };
 </script>
 
 <style>
@@ -52,4 +52,8 @@
     .tags .v-chip {
         margin: 4px 8px 4px 0;
     }
+
+    .v-card.hover {
+        cursor: pointer;
+    }
 </style>