added MobileUserCard

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

@@ -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>
+        {
-            {
+            !app.isMobile && <p>
-                renderName()
+                {
-            }
+                    renderName()
-        </p>
+                }
+            </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 
@@ -138,3 +170,117 @@ export default React.forwardRef((props, ref) => {
         }
     </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

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

@@ -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;
+            }
         }
     }
 }
@@ -180,3 +387,35 @@
         }
     }
 }
+
+.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;
+        }
+    }
+}