Последняя версия с сервера прошлого разработчика

resources/js/Shared/Messanger/BoardMessageItem.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="flex">
+    <user-avatar :user="userMessage.user" size="small"
+                 class="flex-shrink-0 w-10 h-10 lg:w-12 lg:h-12 xl:w-14 xl:h-14 text-sm xl:text-lg"
+    />
+    <div class="ml-5 flex bg-indigo-100 p-4 rounded shadow relative">
+      <div v-if="isAuthorMessage" class="flex absolute top-px right-px">
+        <button @click="remove">
+          <svg class="text-red w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg"
+               width="24"
+               height="24" viewBox="0 0 24 24"
+               fill="none" stroke="currentColor"
+               stroke-width="2" stroke-linecap="round"
+               stroke-linejoin="round"
+          ><line x1="18" y1="6"
+                 x2="6" y2="18"
+          ></line><line x1="6" y1="6"
+                        x2="18" y2="18"
+          ></line></svg>
+        </button>
+      </div>
+      <div class="text-sm text-white break-all">
+        <footer class="font-bold mb-2 text-gray-light flex items-center">
+          {{ userMessage.user.first_name }}
+          <span class="font-normal text-xs text-gray ml-4 lg:ml-8 flex-shrink-0">{{ userMessage.created }}</span>
+        </footer>
+        {{ userMessage.message }}
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import UserAvatar from '@/Shared/Misc/UserAvatar.vue'
+export default {
+    components:{
+        UserAvatar,
+    },
+    props: {
+        userMessage: {
+            type: Object,
+            default: () => {}
+        },
+        profileId: {
+            type: Number,
+            default: 0
+        },
+    },
+    emits: {
+        'remove': null
+    },
+    computed: {
+        isAuthorMessage() {
+            return this.profileId != this.userMessage.user.id
+        },
+    },
+    methods: {
+        remove(){
+            this.$emit('remove', this.userMessage)
+        }
+    }
+
+}
+</script>