Initial commit

resources/js/Shared/Partials/UserComment.vue

@@ -0,0 +1,67 @@
+<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>