|
<MudListItem Class="pa-0 px-2">
|
<div class="d-flex flex-row mt-n1 mb-n1">
|
<div class="mr-4">
|
<MudBadge Dot="true" Overlap="true" Color="@OnlineStatus" Bordered="true" Class="my-2" Origin="Origin.BottomCenter">
|
@if (!String.IsNullOrEmpty(AvatarUrl))
|
{
|
<MudAvatar Image="@AvatarUrl" />
|
}
|
else
|
{
|
<MudAvatar Color="@AvatarColor">
|
<MudIcon Icon="@DiscordIcon" Style="font-size: 1.8rem;" ViewBox="0 0 48 48" />
|
</MudAvatar>
|
}
|
</MudBadge>
|
</div>
|
<div>
|
<MudText Typo="Typo.body2" Style="@($"color:{@UserRoleColor};")" Class="mt-3 mb-n2"><b>@UserName</b></MudText>
|
@if (ListeningToSpotify)
|
{
|
<MudText Typo="Typo.caption">Listening to <b>Spotify</b></MudText>
|
}
|
</div>
|
</div>
|
</MudListItem>
|
|
@code {
|
[Parameter] public string UserName { get; set; }
|
[Parameter] public string AvatarUrl { get; set; }
|
[Parameter] public Color OnlineStatus { get; set; }
|
[Parameter] public Color AvatarColor { get; set; }
|
[Parameter] public string UserRoleColor { get; set; }
|
[Parameter] public bool ListeningToSpotify { get; set; }
|
|
public string DiscordIcon = "<path d=\"M40 12s-4.586-3.59-10-4l-.488.977C34.406 10.176 36.652 11.89 39 14c-4.047-2.066-8.04-4-15-4-6.96 0-10.953 1.934-15 4 2.348-2.11 5.02-4.016 9.488-5.023L18 8c-5.68.535-10 4-10 4s-5.121 7.426-6 22c5.16 5.953 13 6 13 6l1.64-2.184C13.856 36.848 10.716 35.121 8 32c3.238 2.45 8.125 5 16 5s12.762-2.55 16-5c-2.715 3.121-5.855 4.848-8.64 5.816L33 40s7.84-.047 13-6c-.879-14.574-6-22-6-22zM17.5 30c-1.934 0-3.5-1.79-3.5-4s1.566-4 3.5-4 3.5 1.79 3.5 4-1.566 4-3.5 4zm13 0c-1.934 0-3.5-1.79-3.5-4s1.566-4 3.5-4 3.5 1.79 3.5 4-1.566 4-3.5 4z\"/>";
|
}
|
