support for only icon

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

@@ -9,7 +9,7 @@ import User from "@models/user"
 
 import "./index.less"
 
-export default (props) => {
+const UserPreview = (props) => {
 	let [userData, setUserData] = React.useState(props.user)
 
 	const fetchUser = async () => {
@@ -20,7 +20,7 @@ export default (props) => {
 
 		const data = await User.data({
 			user_id: props.user_id,
-            username: props.username
+			username: props.username,
 		}).catch((err) => {
 			console.error(err)
 			app.message.error("Failed to fetch user data")
@@ -34,7 +34,9 @@ export default (props) => {
 
 	const handleOnClick = async () => {
 		if (typeof props.onClick !== "function") {
-            console.warn("UserPreview: onClick is not a function, executing default action")
+			console.warn(
+				"UserPreview: onClick is not a function, executing default action",
+			)
 			return app.navigation.goToAccount(userData.username)
 		}
 
@@ -48,35 +50,35 @@ export default (props) => {
 	}, [])
 
 	if (!userData) {
-        return <div className="userPreview">
+		return (
+			<div className="userPreview">
 				<Skeleton.Avatar active />
 			</div>
+		)
 	}
 
-    return <div
-        className={classnames(
-            "userPreview",
-            {
+	return (
+		<div
+			className={classnames("userPreview", {
 				["clickable"]: typeof props.onClick === "function",
 				["small"]: props.small && !props.big,
 				["big"]: props.big && !props.small,
-            }
-        )}
+			})}
 		>
 			<div className="avatar" onClick={handleOnClick}>
-            <Image
-                alt="Avatar"
-                src={userData.avatar}
-            />
+				<Image alt="Avatar" src={userData.avatar} />
 			</div>
+			{!props.onlyIcon && (
 				<div className="info" onClick={handleOnClick}>
 					<h1>
 						{userData.fullName ?? userData.username}
 						{userData.verified && <Icons.verifiedBadge />}
 					</h1>
-            <span>
-                @{userData.username}
-            </span>
+					<span>@{userData.username}</span>
 				</div>
+			)}
 		</div>
+	)
 }
+
+export default UserPreview