added basis

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

@@ -1,23 +1,100 @@
 import React from "react"
 import * as antd from "antd"
+import { Icons } from "components/Icons"
+import moment from "moment"
 
 import "./index.less"
 
+function PostHeader({ postData }) {
+    const [timeAgo, setTimeAgo] = React.useState(0)
+
+    const updateTimeAgo = () => {
+        setTimeAgo(moment(postData.created_at ?? "").fromNow())
+    }
+
+    React.useEffect(() => {
+        updateTimeAgo()
+
+        const interval = setInterval(() => {
+            updateTimeAgo()
+        }, 10000)
+
+        return () => {
+            clearInterval(interval)
+        }
+    }, [postData.created_at])
+
+    return <div className="userInfo">
+        <div className="avatar">
+            <antd.Avatar src={postData.user?.avatar} />
+        </div>
+        <div className="info">
+            <div>
+                <h1>
+                    {postData.user?.fullName ?? `@${postData.user?.username}`}
+                </h1>
+            </div>
+
+            <div>
+                {timeAgo}
+            </div>
+        </div>
+    </div>
+}
+
+function PostContent({ message }) {
+    return <div className="content">
+        {message}
+    </div>
+}
+
+function PostActions(props) {
+    return <div className="actions">
+        <div className="action" id="likes" onClick={props.onClickLike}>
+            <div className="icon">
+                <Icons.Heart />
+            </div>
+            <div className="value">
+                {String(props.likes)}
+            </div>
+        </div>
+        <div className="action" id="comments" onClick={props.onClickComments}>
+            <div className="icon">
+                <Icons.MessageSquare className="icon" />
+            </div>
+            <div className="value">
+                {String(props.comments)}
+            </div>
+        </div>
+        <div className="action" id="share" onClick={props.onClickShare}>
+            <div className="icon">
+                <Icons.Share />
+            </div>
+        </div>
+        {props.isSelf && <div className="action" id="selfMenu" onClick={props.onClickSelfMenu}>
+            <div className="icon">
+                <Icons.MoreHorizontal />
+            </div>
+        </div>}
+    </div>
+}
+
 export default class PostCard extends React.Component {
     render() {
         return <div className="postCard">
-            <div className="userInfo">
-                <div>
-                    <antd.Avatar src={this.props.data.user.avatar} />
-                </div>
-                <div className="userName">
-                    <h1>
-                        @{this.props.data.user.username}
-                    </h1>
-                </div>
+            <div className="wrapper">
+                <PostHeader
+                    postData={this.props.data}
+                />
+                <PostContent
+                    message={this.props.data.message}
+                />
             </div>
-            <div className="content">
-                {this.props.data.message}
+            <div className="actionsWrapper">
+                <PostActions
+                    likes={this.props.data.likes.length}
+                    comments={this.props.data.comments.length}
+                />
             </div>
         </div>
     }

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

@@ -1,45 +1,193 @@
 .postCard {
-    display: inline-flex;
+    display       : inline-flex;
     flex-direction: column;
 
-    width: 100%;
+    width    : 100%;
     max-width: 40vw;
-    padding: 17px;
+
+    filter: drop-shadow(3px 3px 2px #c5c5c5);
 
     background-color: var(--background-color-accent);
-    border-radius: 8px;
+    border-radius   : 8px;
 
-    .userInfo {
-        display: inline-flex;
-        flex-direction: row;
-        align-items: center;
+    transition: all 0.2s ease-in-out;
 
-        margin-bottom: 15px;
+    .wrapper {
+        display       : inline-flex;
+        flex-direction: column;
+        align-items   : center;
 
-        h1 {
-            margin: 0;
-            font-family: "DM Mono", monospace;
+        width  : 100%;
+        padding: 17px;
+
+        transition: all 0.2s ease-in-out;
+
+        .userInfo {
+            display       : inline-flex;
+            flex-direction: row;
+            align-items   : center;
+
+            margin-bottom: 15px;
+
+            >div {
+                margin-right: 10px;
+            }
+
+            .info {
+                display        : inline-flex;
+                flex-direction : column;
+                align-items    : center;
+                justify-content: start;
+
+                text-align: start;
+
+                width: fit-content;
+
+                h1 {
+                    margin     : 0;
+                    font-family: "DM Mono", monospace;
+                    align-self : start;
+                }
+
+                >div {
+                    align-self: start;
+                }
+            }
         }
 
-        > div {
-            margin-right: 10px;
+        .content {
+            display       : inline-flex;
+            flex-direction: column;
+            align-items   : flex-start;
+
+            background-color: var(--background-color-primary);
+            padding         : 10px;
+            border-radius   : 8px;
+
+            font-size  : 14px;
+            font-family: "Poppins", sans-serif;
+
+            overflow   : hidden;
+            word-break : break-all;
+            user-select: text;
         }
 
+        >div {
+            width: 100%;
+        }
     }
 
-    .content {
-        display: inline-flex;
-        flex-direction: column;
-        align-items: flex-start;
+    .actionsWrapper {
+        display        : flex;
+        flex-direction : row;
+        align-items    : center;
+        justify-content: center;
+
+        position: absolute;
+        bottom  : 0;
+        left    : 0;
+
+        opacity: 0;
+
+        width : 100%;
+        height: 50px;
+
+        margin-top: 15px;
+        padding   : 10px;
+
+        border-radius: 8px;
+        transition   : all 0.2s ease-in-out;
 
         background-color: var(--background-color-primary);
-        padding: 10px;
-        border-radius: 8px;
+        filter          : drop-shadow(3px 3px 2px #c5c5c5);
+    }
 
-        font-size: 14px;
-        font-family: "Poppins", sans-serif;
+    .actions {
+        display        : inline-flex;
+        flex-direction : row;
+        align-items    : center;
+        justify-content: space-between;
 
-        overflow: hidden;
-        word-break: break-all;
+        width: 80%;
+
+        transition: all 0.2s ease-in-out;
+
+        #likes {
+            transition: all 0.2s ease-in-out;
+
+            color: var(--primaryColor) !important;
+
+            svg {
+                transition: all 0.2s ease-in-out;
+                color     : var(--background-color-contrast) !important;
+            }
+        }
+
+        #likes:hover {
+            svg {
+                color: var(--primaryColor) !important;
+            }
+        }
+
+        .action {
+            cursor    : pointer;
+            transition: all 0.2s ease-in-out;
+
+            .value {
+                transition: all 0.2s ease-in-out;
+                width     : 0;
+                opacity   : 0;
+            }
+        }
+
+        .action:hover {
+            .value {
+                margin-left: 3px;
+                width      : 20px;
+                opacity    : 1;
+            }
+        }
+
+        svg {
+            margin: 0 !important;
+        }
+
+        >div {
+            display        : flex;
+            flex-direction : row;
+            align-items    : center;
+            justify-content: center;
+
+            border-radius: 360px;
+            width        : 55px;
+            height       : 55px;
+
+            font-size: 20px;
+            padding  : 2px;
+
+            background-color: var(--background-color-primary);
+
+            transform: translate(0, -15px);
+        }
+    }
+}
+
+.postCard:hover {
+    .wrapper {
+        margin-bottom: 55px;
+    }
+
+    .actionsWrapper {
+        animation: fadeActionsIn 0.2s 0.2s linear forwards;
+    }
+}
+
+@keyframes fadeActionsIn {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
     }
 }