RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-10 02:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

added counter

Browse Source
This commit is contained in:
srgooglo 2022-03-15 03:10:37 +01:00
parent 5f1b11569a
commit 3e52ff1699
2 changed files with 54 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/app/src/components/FollowButton/index.jsx
View File

@ -4,12 +4,17 @@ import classnames from "classnames"
import "./index.less"
export default (props) => {
return <a
return <div className="followButton">
<div className="counter">
{props.count}
</div>
<div
onClick={props.onClick}
className={classnames(
"followButton",
"btn",
{ ["followed"]: props.followed }
)}>
<span>{props.followed ? "Following" : "Follow"}</span>
</a>
</div>
</div>
}

36
packages/app/src/components/FollowButton/index.less
View File

@ -1,18 +1,31 @@
@borderRadius: 8px;
.followButton {
user-select: none;
width : fit-content;
height : 30px;
padding: 5px 15px;
text-decoration: none;
text-align : center;
vertical-align : middle;
letter-spacing : 1px;
display : inline-flex;
flex-direction: row;
align-items : center;
transition: all 150ms ease-in-out;
outline : 1px solid var(--border-color);
border-radius: 8px;
border-radius: @borderRadius;
.counter {
padding: 5px 15px;
}
.btn {
width : 100px;
padding: 5px 15px;
cursor : pointer;
transition: all 150ms ease-in-out;
border-radius: @borderRadius;
border-left : 1.5px solid var(--border-color);
text-align : center;
letter-spacing: 1px;
span {
transition: all 150ms ease-in-out;
@ -42,6 +55,7 @@
color: #7e7e7e !important;
}
}
}
}
@keyframes gradientMove {