Adding messaging / content

src/views/contents/ContentCard.vue

@@ -1,9 +1,10 @@
 <template>
 
+  <div class="shadow-lg rounded-lg">
 
-  <div class=" shadow-lg rounded-lg max-w-sm">
-
-    <div class="h-48 object-cover bg-purple">
+    <div class="text-lg font-bold">{{ props.content.title }}</div>
+    
+    <div class="h-48 object-cover bg-purple rounded-md">
 
       <v-img :src="props.content.url"
              v-if="!isHttpUrl">
@@ -19,11 +20,33 @@
 
     </div>
 
-    <router-link :to="'content/' + props?.content?.id">
-    
-      <div class="text-lg font-bold">{{ props.content.title }}</div>
-      <div class="text-sm text-gray-500">{{ props.content.description }}</div>
-    </router-link>
+
+    <div class="flex flex-row">
+
+      <div>
+        <div class="text-sm text-gray-500">{{ props.content.description }}</div>
+      </div>
+
+      <div>
+        <router-link :to="'content/' + props?.content?.id">
+          <div class="bg-blue-500 rounded-lg py-1 px-2">Plus ...</div>
+        </router-link>
+      </div>
+
+    </div>
+
+    <div>
+
+      <div class="border-b p-6">
+        <h2 class="font-sans font-semibold">Commentaires</h2>
+        <MessageList :content-id="props.content.id">
+        </MessageList>
+      </div>
+      <div class="border-b-2 p-6">
+        <PostMessage :content-id="props.content.id">
+        </PostMessage>
+      </div>
+    </div>
 
   </div>
 
@@ -32,6 +55,8 @@
 <script setup>
 
 import {defineProps, computed} from 'vue';
+import MessageList from "@/views/messages/MessageList.vue";
+import PostMessage from "@/views/messages/PostMessage.vue";
 
 const isHttpUrl = computed(() => props.content?.uri?.startsWith('http'))