From da5d9a71714f8f4376a39ef11b14af64ff593593 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nguy=E1=BB=85n=20M=E1=BA=ADu=20Minh?=
 <mauminh.nguyen@gmail.com>
Date: Tue, 10 Oct 2023 07:49:55 +0700
Subject: [PATCH] fix: trying add props on template

---
 src/components/Post/PostComment.vue | 74 +++++++++++++++--------------
 1 file changed, 39 insertions(+), 35 deletions(-)

diff --git a/src/components/Post/PostComment.vue b/src/components/Post/PostComment.vue
index e8afab2..3ce51d7 100644
--- a/src/components/Post/PostComment.vue
+++ b/src/components/Post/PostComment.vue
@@ -48,43 +48,47 @@ onMounted(async () => {
 
 </script>
 <template>
-  <Menu as="div" class="flex w-full mb-1">
-    <router-link :to="{ name: 'user', params: { id: comment.user.id } }" class="mr-2">
-      <img class="rounded-full ml-1 min-w-[36px] max-h-[36px]" :src="profilePhoto" />
-    </router-link>
-    <div class="flex flex-col justify-start items-start">
-      <div class="flex items-center w-full relative">
-        <div
-          class="flex flex-col justify-start items-start bg-[#EFF2F5] text-sm pt-1 pb-2 px-4 rounded-2xl h-auto max-w-[500px] w-6/7">
-          <span class="font-medium">{{ comment.user.displayName }}</span>
-          <div class="text-left [overflow-wrap:anywhere]" v-html="formatContent(comment.content)"></div>
-        </div>
-        <div class="w-fit" v-show="comment.uid === cuser?.id">
-          <MenuButton class="rounded-full p-1.5 ml-2 cursor-pointer hover:bg-[#F2F2F2] w-full">
-            <i class="pi pi-ellipsis-h text-[#64676B] text-lg" />
-          </MenuButton>
-        </div>
-        <Transition enter-active-class="transition duration-100 ease-out" enter-from-class="transform scale-95 opacity-0"
-          enter-to-class="transform scale-100 opacity-100" leave-active-class="transition duration-75 ease-in"
-          leave-from-class="transform scale-100 opacity-100" leave-to-class="transform scale-95 opacity-0">
-          <MenuItems
-            class="absolute right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none p-2">
-            <MenuItem v-slot="{ active }" v-for="(item, index) in menuItems" :key="index">
-              <button :class="[active ? 'bg-gray-200' : 'bg-white', 'group flex w-full items-center rounded-md px-2 py-2 text-sm text-gray-900 select-none']" @click="item.action">
+  <Menu>
+    <div class="flex w-full mb-1">
+      <router-link :to="{ name: 'user', params: { id: comment.user.id } }" class="mr-2">
+        <img class="rounded-full ml-1 min-w-[36px] max-h-[36px]" :src="profilePhoto" />
+      </router-link>
+      <div class="flex flex-col justify-start items-start">
+        <div class="flex items-center w-full relative">
+          <div
+            class="flex flex-col justify-start items-start bg-[#EFF2F5] text-sm pt-1 pb-2 px-4 rounded-2xl h-auto max-w-[500px] w-6/7">
+            <span class="font-medium">{{ comment.user.displayName }}</span>
+            <div class="text-left [overflow-wrap:anywhere]" v-html="formatContent(comment.content)"></div>
+          </div>
+          <div class="w-fit" v-show="comment.uid === cuser?.id">
+            <MenuButton class="rounded-full p-1.5 ml-2 cursor-pointer hover:bg-[#F2F2F2] w-full">
+              <i class="pi pi-ellipsis-h text-[#64676B] text-lg" />
+            </MenuButton>
+          </div>
+          <Transition enter-active-class="transition duration-100 ease-out"
+            enter-from-class="transform scale-95 opacity-0" enter-to-class="transform scale-100 opacity-100"
+            leave-active-class="transition duration-75 ease-in" leave-from-class="transform scale-100 opacity-100"
+            leave-to-class="transform scale-95 opacity-0">
+            <MenuItems
+              class="absolute right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none p-2">
+              <MenuItem v-slot="{ active }" v-for="(item, index) in menuItems" :key="index">
+              <button
+                :class="[active ? 'bg-gray-200' : 'bg-white', 'group flex w-full items-center rounded-md px-2 py-2 text-sm text-gray-900 select-none']"
+                @click="item.action">
                 <i :class="['pi', item.icon, 'w-5 h-5 mr-2']" :style="{ fontSize: 'large' }" />
                 {{ item.name }}
               </button>
-            </MenuItem>
-          </MenuItems>
-        </Transition>
-      </div>
-      <div class="flex flex-row justify-start items-center pt-1 text-xs space-x-3 ml-2">
-        <span class="hover:underline underline-offset-2 cursor-pointer font-bold text-[#65676B]">Thích</span>
-        <span class="hover:underline underline-offset-2 cursor-pointer font-bold text-[#65676B]">Phản hồi</span>
-        <span class="hover:underline underline-offset-2 cursor-pointer">
-          {{ formatTimeAgo(new Date(comment.created_at)) }}
-        </span>
+              </MenuItem>
+            </MenuItems>
+          </Transition>
+        </div>
+        <div class="flex flex-row justify-start items-center pt-1 text-xs space-x-3 ml-2">
+          <span class="hover:underline underline-offset-2 cursor-pointer font-bold text-[#65676B]">Thích</span>
+          <span class="hover:underline underline-offset-2 cursor-pointer font-bold text-[#65676B]">Phản hồi</span>
+          <span class="hover:underline underline-offset-2 cursor-pointer">
+            {{ formatTimeAgo(new Date(comment.created_at)) }}
+          </span>
+        </div>
       </div>
     </div>
-  </Menu>
-</template>
\ No newline at end of file
+</Menu></template>
\ No newline at end of file