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

resources/js/Shared/Partials/UserCommentChildren.vue

@@ -0,0 +1,92 @@
+<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>
+      <div v-show="comment.user.id != comment.answer_to.id">
+        <inertia-link :href="route('profile.user', comment.answer_to.username)" class="text-orange">
+          @{{ comment.answer_to.username }}
+        </inertia-link>
+      </div>
+      {{ 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>
+        <inertia-link
+          v-if="$page.props.auth.user.id !== comment.user.id"
+          :href="route('complaint.reason.comment', comment.id)"
+          class="
+            text-xs text-orange
+            font-semibold
+            hover:underline
+            cursor-pointer
+          "
+        >
+          пожаловаться
+        </inertia-link>
+        <span
+          class="
+            text-xs text-gray-light
+            font-semibold
+            hover:underline
+            cursor-pointer
+          "
+          @click="toAnswerChildren()"
+        >ответить</span>
+        <user-comment-remove v-if="$page.props.auth.user.id === comment.user.id || $page.props.auth.user.id === creator_id" @remove="removeComment" />
+      </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.vue'
+import UserCommentRemove from './UserCommentRemove.vue'
+
+export default {
+    components: {
+        UserAvatar,
+        UserCommentRemove
+    },
+    props: {
+        comment: Object,
+        creator_id: Number,
+    },
+    emits: ['toAnswerChild', 'removeComment'],
+    methods: {
+        toAnswerChildren() {
+            this.$emit('toAnswerChild', this.comment.user.id, this.comment.user.username)
+        },
+        removeComment() {
+            this.$emit('removeComment', this.comment.id)
+        }
+    },
+}
+</script>