added comments counter

packages/app/src/components/PostCard/components/actions/commentsButton/index.jsx

@@ -0,0 +1,21 @@
+import React from "react"
+import { Button } from "antd"
+import { Icons } from "components/Icons"
+
+import "./index.less"
+
+export default (props) => {
+    return <div
+        className="comments_button"
+    >
+        <Button
+            type="ghost"
+            shape="circle"
+            onClick={props.onClickComments}
+            icon={<Icons.MessageCircle />}
+        />
+        {
+            props.count > 0 && <span className="comments_count">{props.count}</span>
+        }
+    </div>
+}

packages/app/src/components/PostCard/components/actions/commentsButton/index.less

@@ -0,0 +1,10 @@
+.comments_button {
+    display: inline-flex;
+    flex-direction: row;
+
+    align-items: center;
+
+    .comments_count {
+        font-size: 0.8rem;
+    }
+}

packages/app/src/components/PostCard/components/actions/index.jsx

@@ -4,6 +4,7 @@ import { Icons } from "components/Icons"
 
 import SaveButton from "./saveButton"
 import LikeButton from "./likeButton"
+import CommentsButton from "./commentsButton"
 
 import "./index.less"
 
@@ -51,11 +52,9 @@ export default (props) => {
                 />
             </div>
             <div className="action" id="comments">
-                <Button
+                <CommentsButton
-                    type="ghost"
+                    onClickComments={props.onClickComments}
-                    shape="circle"
+                    count={props.commentsCount}
-                    onClick={props.onClickComments}
-                    icon={<Icons.MessageCircle />}
                 />
             </div>
             <div className="action" id="more">