usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-03-09 03:53:23 +08:00
Code Issues Projects Releases Packages Wiki Activity

chore: tweak user list display

Browse source
This commit is contained in:
Steven 2024-03-29 08:37:07 +08:00
parent bfaf06582c
commit 526f46807e
1 changed files with 24 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
web/src/components/UserList.tsx
View file

@ -20,27 +20,31 @@ const UserList = () => {
}, []);
return (
<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>
{users.map((user) => (
<div
key={user.name}
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>
</Link>
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>
))}
</div>
{users.map((user) => (
<div
key={user.name}
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>
</Link>
</div>
))}
</div>
)
);
};