|
|
|
@ -22,11 +22,9 @@ const UsersSection = () => {
|
|
|
|
|
return (
|
|
|
|
|
users.length > 0 && (
|
|
|
|
|
<div className="w-full mt-2 flex flex-col p-2 bg-gray-50 dark:bg-black rounded-lg">
|
|
|
|
|
<div className="w-full flex flex-row justify-between items-center">
|
|
|
|
|
<span className="text-gray-400 font-medium text-sm pl-1">Users</span>
|
|
|
|
|
<IconButton size="sm" onClick={fetchRecommendUsers}>
|
|
|
|
|
<Icon.RefreshCcw className="text-gray-400 w-4 h-auto" />
|
|
|
|
|
</IconButton>
|
|
|
|
|
<div className="w-full mb-1 flex flex-row justify-between items-center px-1">
|
|
|
|
|
<span className="text-gray-400 font-medium text-sm select-none">Users</span>
|
|
|
|
|
<Icon.RefreshCcw onClick={fetchRecommendUsers} className="text-gray-400 w-4 h-auto cursor-pointer hover:opacity-80" />
|
|
|
|
|
</div>
|
|
|
|
|
{users.map((user) => (
|
|
|
|
|
<div
|
|
|
|
@ -34,12 +32,8 @@ const UsersSection = () => {
|
|
|
|
|
className="w-full flex flex-row justify-start items-center px-2 py-1.5 hover:bg-gray-100 dark:hover:bg-zinc-900 rounded-lg"
|
|
|
|
|
>
|
|
|
|
|
<Link className="w-full flex flex-row items-center" to={`/u/${encodeURIComponent(user.username)}`} unstable_viewTransition>
|
|
|
|
|
<UserAvatar className="mr-2 shrink-0" avatarUrl={user.avatarUrl} />
|
|
|
|
|
<div className="w-full flex flex-col justify-center items-start">
|
|
|
|
|
<span className="text-gray-600 leading-tight max-w-[80%] truncate dark:text-gray-400">
|
|
|
|
|
{user.nickname || user.username}
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<UserAvatar className="!w-6 !h-6 !rounded-lg mr-2 shrink-0" avatarUrl={user.avatarUrl} />
|
|
|
|
|
<span className="text-gray-600 truncate dark:text-gray-400">{user.nickname || user.username}</span>
|
|
|
|
|
</Link>
|
|
|
|
|
</div>
|
|
|
|
|
))}
|
|
|
|
|