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 MobileUserCard

Browse Source
This commit is contained in:
SrGooglo 2023-07-08 18:27:30 +00:00
parent 885b77390a
commit 86f6daf321
2 changed files with 393 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

162
packages/app/src/components/UserCard/index.jsx
View File

@ -1,8 +1,9 @@
import React from "react"
import * as antd from "antd"
import classnames from "classnames"
import { Icons, createIconRender } from "components/Icons"
import { Image, UserBadges } from "components"
import { Image, UserBadges, FollowButton } from "components"
import linksDecorators from "schemas/userLinksDecorators"
@ -18,6 +19,27 @@ function processValue(value, decorator) {
return value
}
const UserLinkViewer = (props) => {
const { link, decorator } = props
return <div className="userLinkViewer">
<div className="userLinkViewer_icon">
{
createIconRender(decorator.icon ?? "MdLink")
}
</div>
<div className="userLinkViewer_value">
<p>
{
link.value
}
</p>
</div>
</div>
}
const UserLink = (props) => {
let { index, link } = props
@ -31,6 +53,14 @@ const UserLink = (props) => {
const handleOnClick = () => {
if (!hasHref) {
if (app.isMobile) {
app.DrawerController.open("link_viewer", UserLinkViewer, {
componentProps: {
link: link,
decorator: decorator
}
})
}
return false
}
@ -55,15 +85,17 @@ const UserLink = (props) => {
createIconRender(decorator.icon ?? "MdLink")
}
<p>
{
renderName()
}
</p>
{
!app.isMobile && <p>
{
renderName()
}
</p>
}
</div>
}
export default React.forwardRef((props, ref) => {
export const UserCard = React.forwardRef((props, ref) => {
const [user, setUser] = React.useState(props.user)
// TODO: Support API user data fetching
@ -137,4 +169,118 @@ export default React.forwardRef((props, ref) => {
</div>
}
</div>
})
})
export const MobileUserCard = React.forwardRef((props, ref) => {
return <div
ref={ref}
className={classnames(
"_mobile_userCard",
{
["no-cover"]: !props.user.cover
}
)}
>
<div className="_mobile_userCard_top">
{
props.user.cover && <div className="_mobile_userCard_top_cover">
<div
className="cover"
style={{
backgroundImage: `url("${props.user.cover}")`
}}
/>
<div className="_mobile_userCard_top_avatar_wrapper">
<div className="_mobile_userCard_top_avatar">
<Image
src={props.user.avatar}
/>
</div>
</div>
</div>
}
{
!props.user.cover && <div className="_mobile_userCard_top_avatar">
<Image
src={props.user.avatar}
/>
</div>
}
<div className="_mobile_userCard_top_texts">
<div className="_mobile_userCard_top_username">
<h1>
{
props.user.fullName ?? `@${props.user.username}`
}
{
props.user.verified && <Icons.verifiedBadge />
}
</h1>
{
props.user.fullName && <span>
@{props.user.username}
</span>
}
</div>
<div className="_mobile_userCard_top_description">
<p>
{
props.user.description
}
</p>
</div>
</div>
{
props.user.links
&& Array.isArray(props.user.links)
&& props.user.links.length > 0
&& <div
className={classnames(
"_mobile_userCard_links",
)}
>
{
props.user.links.map((link, index) => {
return <UserLink index={index} link={link} />
})
}
</div>
}
</div>
<div
className={classnames(
"_mobile_card",
"_mobile_userCard_actions",
)}
>
{
props.followers && <FollowButton
count={props.followers.length}
onClick={props.onClickFollow}
followed={props.isFollowed}
self={props.isSelf}
/>
}
<antd.Button
type="primary"
icon={<Icons.MdMessage />}
disabled
/>
<antd.Button
type="primary"
icon={<Icons.MdShare />}
/>
</div>
</div>
})
export default UserCard

239
packages/app/src/components/UserCard/index.less
View File

@ -1,3 +1,5 @@
@import "theme/vars.less";
#root {
&.mobile {
.userCard {
@ -5,6 +7,211 @@
filter: none;
box-shadow: none;
min-width: 0;
.avatar {
width: 20%;
height: fit-content;
}
}
}
}
._mobile_card {
background-color: var(--background-color-accent);
border-radius: 12px;
box-shadow: @card-shadow;
}
._mobile_userCard {
display: flex;
flex-direction: column;
width: 100%;
height: fit-content;
gap: 10px;
&.no-cover {
._mobile_userCard_top {
flex-direction: row;
._mobile_userCard_top_avatar {
padding: 10px;
}
._mobile_userCard_top_texts {
margin-left: 0;
}
}
}
._mobile_userCard_top {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
height: auto;
background-color: var(--background-color-accent);
border-radius: 12px;
box-shadow: @card-shadow;
._mobile_userCard_top_cover {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
max-height: 25vh;
z-index: 100;
.cover {
width: 100%;
height: 25vh;
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
border-radius: 12px;
}
}
._mobile_userCard_top_avatar_wrapper {
position: absolute;
display: flex;
flex-direction: row;
align-items: flex-end;
bottom: 0;
left: 0;
padding: 0 10px;
gap: 20px;
z-index: 110;
transform: translateY(80%);
}
._mobile_userCard_top_avatar {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 25vw;
height: 25vw;
border-radius: 12px;
img {
width: 100%;
height: 100%;
object-fit: contain;
background-color: black;
box-shadow: @card-shadow;
border-radius: 12px;
}
}
._mobile_userCard_top_texts {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 30%;
padding: 10px;
padding-left: 15px;
._mobile_userCard_top_username {
font-family: "Space Grotesk", sans-serif;
h1 {
color: var(--layout-background-contrast);
margin: 0;
}
svg {
color: var(--colorPrimary)
}
margin-bottom: 10px;
}
._mobile_userCard_top_description {
color: var(--text-color);
p {
margin: 0;
}
// max-height: 30vh;
// overflow: hidden;
// p {
// text-overflow: ellipsis;
// overflow: hidden;
// white-space: nowrap;
// }
}
}
}
._mobile_userCard_actions {
display: flex;
flex-direction: row;
gap: 20px;
padding: 10px;
}
._mobile_userCard_links {
display: flex;
flex-direction: row;
justify-content: flex-start;
gap: 15px;
padding: 10px 20px;
padding-top: 0;
.userLink {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 1.3rem;
p {
margin: 0;
}
}
}
}
@ -179,4 +386,36 @@
}
}
}
}
.userLinkViewer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: fit-content;
padding: 30px 0;
.userLinkViewer_icon {
font-size: 3rem;
}
.userLinkViewer_value {
font-size: 1.5rem;
font-family: "DM Mono", monospace;
background-color: var(--background-color-accent);
padding: 10px;
border-radius: 12px;
p {
margin: 0;
}
}
}