added UserPreview component

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

@@ -0,0 +1,38 @@
+import React from "react"
+import classnames from "classnames"
+
+import { Image } from "components"
+import { Icons } from "components/Icons"
+
+import "./index.less"
+
+export default (props) => {
+    const { user } = props
+
+    const handleOnClick = async () => {
+        if (typeof props.onClick !== "function") {
+            console.warn("UserPreview: onClick is not a function")
+            return
+        }
+
+        return await props.onClick(user)
+    }
+
+    return <div
+        className={classnames("userPreview", { ["clickable"]: typeof props.onClick === "function" })}
+        onClick={handleOnClick}
+    >
+        <div className="avatar">
+            <Image
+                alt="Avatar"
+                src={user.avatar}
+            />
+        </div>
+        <div className="info">
+            <h1>
+                {user.fullName ?? `@${user.username}`}
+                {user.verified && <Icons.verifiedBadge />}
+            </h1>
+        </div>
+    </div>
+}

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

@@ -0,0 +1,57 @@
+.userPreview {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+
+    svg {
+        fill: var(--appColor);
+        margin-left: 6px;
+    }
+
+    &.clickable {
+        cursor: pointer;
+    }
+
+    .avatar {
+        width: 40px;
+        height: 40px;
+
+        margin-right: 10px;
+
+        img {
+            object-fit: cover;
+
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+        }
+    }
+
+    .info {
+        display: inline-flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: start;
+
+        text-align: start;
+
+        width: fit-content;
+
+        color: var(--background-color-contrast);
+
+        h1 {
+            align-self: start;
+
+            color: var(--background-color-contrast);
+            font-family: "DM Mono", monospace;
+
+            font-size: 1rem;
+
+            margin: 0;
+        }
+
+        >div {
+            align-self: start;
+        }
+    }
+}