68 lines
1.5 KiB
Vue
68 lines
1.5 KiB
Vue
<template>
|
|
<div class="flex group">
|
|
<inertia-link :href="route('profile.user', comment.user.username)" class="block flex-shrink-0 mr-3">
|
|
<user-avatar
|
|
:user="comment.user"
|
|
size="small"
|
|
:class="[
|
|
creator_id == comment.user.id ? 'border border-orange' : '',
|
|
'text-xs w-10 h-10',
|
|
]"
|
|
/>
|
|
</inertia-link>
|
|
<div class="flex-1 mr-3">
|
|
<inertia-link :href="route('profile.user', comment.user.username)" class="font-semibold underline inline-block mr-2">{{
|
|
comment.user.username
|
|
}}</inertia-link>
|
|
{{ comment.body }}
|
|
<div
|
|
class="
|
|
transition-opacity
|
|
opacity-0
|
|
group-hover:opacity-100
|
|
flex
|
|
space-x-4
|
|
"
|
|
>
|
|
<span class="text-xs text-gray-light">{{
|
|
comment.created_at_humans
|
|
}}</span>
|
|
<span
|
|
class="
|
|
text-xs text-gray-light
|
|
font-semibold
|
|
hover:underline
|
|
cursor-pointer
|
|
"
|
|
>ответить</span
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="flex-shrink-0">
|
|
<button class="button-default">
|
|
<svg class="w-3 h-3">
|
|
<use xlink:href="#heart"></use>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import UserAvatar from '@/Shared/Misc/UserAvatar'
|
|
export default {
|
|
components: {
|
|
UserAvatar
|
|
},
|
|
props: {
|
|
comment: Object,
|
|
creator_id: Number,
|
|
},
|
|
methods:{
|
|
likeFeed(){
|
|
this.$emit('likeFeed');
|
|
}
|
|
}
|
|
};
|
|
</script>
|