added UserCard component

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

@@ -0,0 +1,57 @@
+import React from "react"
+import * as antd from "antd"
+
+import { Icons } from "components/Icons"
+import { Image, UserBadges } from "components"
+
+import "./index.less"
+
+export default React.forwardRef((props, ref) => {
+    const [user, setUser] = React.useState(props.user)
+
+    // TODO: Support API user data fetching 
+
+    return <div
+        className="userCard"
+        ref={ref}
+    >
+        <div className="avatar">
+            <Image
+                src={user.avatar}
+            />
+        </div>
+
+        <div className="username">
+            <div>
+                <h1>
+                    {user.fullName || user.username}
+                    {user.verified && <Icons.verifiedBadge />}
+                </h1>
+                <span>
+                    @{user.username}
+                </span>
+            </div>
+
+            {
+                user.roles.includes("admin") &&
+                <div className="indicators">
+                    <antd.Tooltip title="Administrators Team">
+                        <Icons.MdAdminPanelSettings />
+                    </antd.Tooltip>
+                </div>
+            }
+        </div>
+
+        <div className="description">
+            <h3>
+                {user.description}
+            </h3>
+        </div>
+
+        <div className="badges">
+            <React.Suspense fallback={<antd.Skeleton />}>
+                <UserBadges user_id={user._id} />
+            </React.Suspense>
+        </div>
+    </div>
+})

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

@@ -0,0 +1,106 @@
+.userCard {
+    display: flex;
+    flex-direction: column;
+
+    background-color: var(--background-color-accent);
+    border-radius: 12px;
+    padding: 20px;
+
+    height: fit-content;
+    width: 20vw;
+    min-width: 400px;
+
+    transition: all 0.3s ease-in-out;
+
+    outline: 1px solid var(--border-color);
+
+    filter: drop-shadow(0 0 20px var(--border-color));
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p,
+    span {
+        margin: 0;
+    }
+
+    .avatar {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+
+        height: 10vh;
+
+        img {
+            width: 100%;
+            height: 100%;
+            border-radius: 12px;
+        }
+    }
+
+    .username {
+        display: flex;
+        flex-direction: row;
+
+        margin-top: 20px;
+
+        h1 {
+            display: inline-flex;
+            font-size: 1.5rem;
+            font-weight: 600;
+            font-family: "Space grotesk", sans-serif;
+        }
+
+        span {
+            font-size: 0.8rem;
+            font-style: italic;
+        }
+
+        svg {
+            fill: var(--appColor);
+            font-size: 0.8rem;
+        }
+
+        div {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+        }
+
+        .indicators {
+            width: fit-content;
+
+            svg {
+                font-size: 1.4rem;
+            }
+        }
+    }
+
+    .description {
+        margin-top: 20px;
+
+        h3 {
+            margin: 0;
+
+            font-size: 0.9rem;
+        }
+    }
+
+    .badges {
+        display: flex;
+        flex-direction: row;
+
+        margin-top: 20px;
+
+        flex-wrap: wrap;
+
+        .badge {
+            margin-left: 5px;
+
+            margin-bottom: 5px;
+        }
+    }
+}