use ne author component in post card

components/PostCard.vue

@@ -12,17 +12,17 @@
       <ds-space
         margin="small"
         style="position: absolute; bottom: 44px;">
-        <ds-avatar
+        <hc-author
-          :image="post.author.User.avatar"
+          :post="post"
-          size="32px" /> <b class="username">{{ post.author.User.name }}</b>
+          :show-author-popover="showAuthorPopover" />
       </ds-space>
       <template slot="footer">
-        <span>
+        <span :style="{ opacity: post.commentsCount ? 1 : .5 }">
-          <ds-icon name="comments" /> <small v-if="post.commentsCount">{{ post.commentsCount }}</small>
+          <ds-icon name="comments" /> <small>{{ post.commentsCount }}</small>
         </span>
         &nbsp;
-        <span>
+        <span :style="{ opacity: post.shoutedCount ? 1 : .5 }">
-          <ds-icon name="heart-o" /> <small v-if="post.shoutedCount">{{ post.shoutedCount }}</small>
+          <ds-icon name="heart-o" /> <small>{{ post.shoutedCount }}</small>
         </span>
       </template>
     </ds-card>
@@ -30,15 +30,21 @@
 </template>
 
 <script>
-/**
+import HcAuthor from '~/components/Author.vue'
- * TODO: we have to check if the user is already following
+
- */
 export default {
   name: 'HcPostCard',
+  components: {
+    HcAuthor
+  },
   props: {
     post: {
       type: Object,
       required: true
+    },
+    showAuthorPopover: {
+      type: Boolean,
+      default: true
     }
   },
   methods: {