64 lines
1.8 KiB
Vue
Executable File
64 lines
1.8 KiB
Vue
Executable File
<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>
|