Skip to content

Commit f5f68f5

Browse files
committed
feat: enhance user avatar display in BountyLive
- Updated avatar fallback to display initials using the `Util.initials` function for better user identification. - Modified participant display logic to show a maximum of three avatars, with a count of additional participants if applicable. - Improved avatar styling with additional ring effects for visual distinction.
1 parent 6e194b7 commit f5f68f5

File tree

1 file changed

+15
-4
lines changed

1 file changed

+15
-4
lines changed

lib/algora_web/live/bounty_live.ex

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -401,7 +401,7 @@ defmodule AlgoraWeb.BountyLive do
401401
<div class="flex items-center gap-4">
402402
<.avatar>
403403
<.avatar_image src={user.avatar_url} />
404-
<.avatar_fallback>{String.first(user.name)}</.avatar_fallback>
404+
<.avatar_fallback>{Util.initials(user.name)}</.avatar_fallback>
405405
</.avatar>
406406
<div>
407407
<p class="font-medium">{user.name}</p>
@@ -476,14 +476,25 @@ defmodule AlgoraWeb.BountyLive do
476476
Contributor chat
477477
</h2>
478478
<div class="relative flex -space-x-2">
479-
<%= for participant <- @participants do %>
480-
<.avatar>
481-
<.avatar_image src={participant.user.avatar_url} alt="Developer avatar" />
479+
<%= for participant <- @participants |> Enum.take(3) do %>
480+
<.avatar class="ring-4 ring-background">
481+
<.avatar_image
482+
src={participant.user.avatar_url}
483+
alt="Developer avatar"
484+
class="ring-2 ring-background"
485+
/>
482486
<.avatar_fallback>
483487
{Algora.Util.initials(participant.user.name)}
484488
</.avatar_fallback>
485489
</.avatar>
486490
<% end %>
491+
<%= if length(@participants) > 3 do %>
492+
<.avatar class="ring-4 ring-background">
493+
<.avatar_fallback>
494+
+{length(@participants) - 3}
495+
</.avatar_fallback>
496+
</.avatar>
497+
<% end %>
487498
</div>
488499
</div>
489500
</div>

0 commit comments

Comments
 (0)