Provide an alternative when a player headshot is missing.

src/Client/Features/Admin/AddPlayer.razor

@@ -47,7 +47,7 @@
         <MudItem lg="4" xs="12" Class="d-flex justify-center align-center">
             <MudGrid>
                 <MudItem xs="12" Class="d-flex justify-center">
-                    <MudAvatar Image="@_previewHeadshotUrl" Size="Size.Large"/>
+                    <Avatar Image="@_previewHeadshotUrl" Size="Size.Large"/>
                 </MudItem>
                 <MudItem xs="12">
                     <EditForm Model=_playerPreviewForm OnValidSubmit=PreviewHeadshotAsync>

src/Client/Features/Dashboard/Shared/RankedCard.razor

@@ -1,7 +1,7 @@
 <MudCard Style=@BackgroundColor Class="ma-1">
     <MudCardHeader>
         <CardHeaderAvatar>
-            <MudAvatar [email protected]></MudAvatar>
+            <Avatar [email protected]></Avatar>
         </CardHeaderAvatar>
         <CardHeaderContent>
             <MudText Typo="NameTypo">@RankedItem.Name</MudText>

src/Client/Features/FreeAgents/Detail.razor

@@ -25,7 +25,7 @@ else
         <MudCardContent>
             <MudGrid>
                 <MudItem lg=3 xs=12 Class="d-flex flex-column align-center">
-                    <MudAvatar Image=@_result.HeadShotUrl Size=Size.Large />
+                    <Avatar Image=@_result.HeadShotUrl Size=Size.Large />
                     <MudText Typo=Typo.h5 Align=Align.Center Color=Color.Tertiary>
                         @_result.Name
                     </MudText>

src/Client/Features/Teams/List.razor

@@ -46,7 +46,7 @@ else
                     <MudCard>
                         <MudCardHeader Class="mud-card-header-override">
                             <CardHeaderAvatar>
-                                <MudAvatar [email protected] Size=Size.Large></MudAvatar>
+                                <Avatar [email protected] Size=Size.Large></Avatar>
                             </CardHeaderAvatar>
                             <CardHeaderContent>
                                 <MudText Typo="Typo.h5">@team.Name</MudText>

src/Client/Shared/Components/Avatar.razor

@@ -0,0 +1,17 @@
+@if(string.IsNullOrEmpty(Image))
+{
+    <div class="mud-theme-dark pa-2 rounded-circle">
+        <MudIcon [email protected] Size=Size @attributes=AllOtherAttributes></MudIcon>
+    </div>
+}
+else
+{
+    <MudAvatar Image=@Image Size=Size @attributes=AllOtherAttributes></MudAvatar>
+}
+
+
+@code {
+    [Parameter] public string? Image { get; set; }
+    [Parameter] public Size Size { get; set; } = Size.Medium;
+    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AllOtherAttributes { get; set; }
+}

src/Client/Shared/Components/NameWithImage.razor

@@ -1,5 +1,5 @@
 <div class="d-flex align-center">
-    <MudAvatar Image=@ImageUrl Class="mr-1"></MudAvatar>
+    <Avatar Image=@ImageUrl Class="mr-1"></Avatar>
     @Name
 </div>
 

src/Tests/Shared/Components/AvatarTests.cs

@@ -0,0 +1,25 @@
+using DynamoLeagueBlazor.Client.Shared.Components;
+
+namespace DynamoLeagueBlazor.Tests.Shared.Components;
+
+public class AvatarTests : UITestBase
+{
+    [Fact]
+    public void GivenNoImageUrl_ThenIsAnIcon()
+    {
+        var component = RenderComponent<Avatar>();
+
+        component.Markup.Should().Contain("icon");
+    }
+
+    [Fact]
+    public void GivenAnImageUrl_ThenIsAnAvatar()
+    {
+        var component = RenderComponent<Avatar>(parameters =>
+        {
+            parameters.Add(p => p.Image, RandomString);
+        });
+
+        component.Markup.Should().Contain("img");
+    }
+}