RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 18:44:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

added basis

Browse Source
This commit is contained in:
srgooglo 2022-03-02 16:07:57 +01:00
parent f8e573521d
commit c4f07c3129
2 changed files with 261 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
packages/app/src/components/PostCard/index.jsx
View File

@ -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 className="wrapper">
<PostHeader
postData={this.props.data}
/>
<PostContent
message={this.props.data.message}
/>
</div>
<div className="userName">
<h1>
@{this.props.data.user.username}
</h1>
</div>
</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>
}

186
packages/app/src/components/PostCard/index.less
View File

@ -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;
transition: all 0.2s ease-in-out;
.wrapper {
display : inline-flex;
flex-direction: column;
align-items : center;
width : 100%;
padding: 17px;
transition: all 0.2s ease-in-out;
.userInfo {
display: inline-flex;
display : inline-flex;
flex-direction: row;
align-items: center;
align-items : center;
margin-bottom: 15px;
h1 {
margin: 0;
font-family: "DM Mono", monospace;
}
> div {
>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;
}
}
}
.content {
display: inline-flex;
display : inline-flex;
flex-direction: column;
align-items: flex-start;
align-items : flex-start;
background-color: var(--background-color-primary);
padding: 10px;
border-radius: 8px;
padding : 10px;
border-radius : 8px;
font-size: 14px;
font-size : 14px;
font-family: "Poppins", sans-serif;
overflow: hidden;
word-break: break-all;
overflow : hidden;
word-break : break-all;
user-select: text;
}
>div {
width: 100%;
}
}
.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);
filter : drop-shadow(3px 3px 2px #c5c5c5);
}
.actions {
display : inline-flex;
flex-direction : row;
align-items : center;
justify-content: space-between;
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;
}
}