Merge pull request #89 from traP-jp/issue/post-link

#82 修復
traP-jp · Jun 16, 2024 · 4be9afa · 4be9afa
2 parents b98bb28 + 5f4dfbb
commit 4be9afa
Showing 1 changed file with 31 additions and 29 deletions.
diff --git a/frontend/src/components/Post.vue b/frontend/src/components/Post.vue
@@ -58,38 +58,40 @@ const vTwemoji = {
 </script>
 
 <template>
-  <div class="post">
-    <div class="post-author-icon">
-      <Avatar size="48px" :name="name" />
-    </div>
-    <div class="post-content">
-      <div class="post-header">
-        <span class="post-author">@{{ name }}</span>
-        <span class="post-date">{{ dateText }}</span>
-      </div>
-      <div class="post-message">
-        {{ content }}
+  <router-link :to="`/posts/${id}/`" class="post-link">
+    <div class="post">
+      <div class="post-author-icon">
+        <Avatar size="48px" :name="name" />
       </div>
-      <div class="post-reactions">
-        <button
-          v-for="reaction in copiedReactions"
-          :key="reaction.id"
-          class="post-reaction"
-          :class="{ clicked: reaction.clicked, ripple: newReaction === reaction.id }"
-          @click="
-            (e) => {
-              toggleReaction(reaction);
-              e.stopPropagation();
-              e.preventDefault();
-            }
-          "
-        >
-          <span class="post-reaction-icon" v-twemoji>{{ reactionIcons[reaction.id] }}</span>
-          <span class="post-reaction-count">{{ reaction.count }}</span>
-        </button>
+      <div class="post-content">
+        <div class="post-header">
+          <span class="post-author">@{{ name }}</span>
+          <span class="post-date">{{ dateText }}</span>
+        </div>
+        <div class="post-message">
+          {{ content }}
+        </div>
+        <div class="post-reactions">
+          <button
+            v-for="reaction in copiedReactions"
+            :key="reaction.id"
+            class="post-reaction"
+            :class="{ clicked: reaction.clicked, ripple: newReaction === reaction.id }"
+            @click="
+              (e) => {
+                toggleReaction(reaction);
+                e.stopPropagation();
+                e.preventDefault();
+              }
+            "
+          >
+            <span class="post-reaction-icon" v-twemoji>{{ reactionIcons[reaction.id] }}</span>
+            <span class="post-reaction-count">{{ reaction.count }}</span>
+          </button>
+        </div>
       </div>
     </div>
-  </div>
+  </router-link>
 </template>
 
 <style lang="scss" scoped>