Adds messages

src/views/messages/Message.vue

@@ -0,0 +1,65 @@
+<template>
+
+  <div class="flex flex-column">
+
+    <div class="flex flex-row p-1">
+
+      <div class="px-2 content-center">
+        <img :src="message.portrait"
+             alt="Profile Image"
+             class="rounded-full"
+             width="32px"
+             height="32px">
+      </div>
+
+      <div class="p-2">
+
+        <div>
+          <span class="font-semibold font-sans mr-2">{{ message.created_by }}</span>
+          <span class="text-sm font-sans text-gray-700">il y a 3 heures</span>
+        </div>
+
+        <div class="font-sans">
+          {{ message.value }}
+        </div>
+
+        <div class="flex px-4">
+
+          <div>
+            <v-icon>mdi-thumb-up-outline</v-icon>
+            {{ message.thumb_up_count }}
+          </div>
+
+          <div>
+            <v-icon>mdi-thumb-down-outline</v-icon>
+            {{ message.thumb_down_count }}
+          </div>
+
+          <div>
+            <v-btn variant="flat">Reply</v-btn>
+          </div>
+        </div>
+
+      </div>
+
+    </div>
+
+  </div>
+
+</template>
+
+<script setup>
+
+import {defineProps} from 'vue';
+
+defineProps({
+  message: {
+    type: Object,
+    required: true
+  }
+});
+
+</script>
+
+
+