Added more UI styling. Updated voice work search provider to send back English tag names, if applicable.

JSMR.UI.Blazor/Components/JProduct.razor

@@ -1,12 +1,30 @@
 @using JSMR.Application.VoiceWorks.Queries.Search
 @using JSMR.UI.Blazor.Services
+@using System.Globalization
 
 <div class="j-card j-voice-work-card">
     <div class="j-voice-work-image-container">
-        <JImage ImageClass="j-voice-work-image" Source="@ImageUrlProvider.GetImageURL(Product.ProductId, Product.HasImage, Product.SalesDate, "main")"></JImage>
+        <JImage OverlayClass="j-voice-work-image-overlay" ImageClass="j-voice-work-image" Source="@ImageUrlProvider.GetImageUrl(Product, "main")"></JImage>
     </div>
     <div class="j-voice-work-content">
         <div class="j-product-title">@Product.ProductName</div>
+        <div class="j-product-contributors">
+            <span class="j-circle">
+                <MudChip T="string"
+                         Href="https://github.com/MudBlazor/MudBlazor"
+                         Target="_blank"
+                         Variant="Variant.Filled"
+                         Icon="@Icons.Material.Outlined.Circle">@Product.Maker</MudChip>
+                @foreach (var creator in Product.Creators)
+                {
+                    <MudChip T="string"
+                             Href="https://github.com/MudBlazor/MudBlazor"
+                             Target="_blank"
+                             Variant="Variant.Filled"
+                             Icon="@Icons.Material.Filled.Person">@creator.Name</MudChip>
+                }
+            </span>
+        </div>
         <div class="j-product-description">@Product.Description</div>
         <div class="j-tags">
             @foreach (var tag in Product.Tags)
@@ -16,10 +34,52 @@
         </div>
     </div>
     <div class="j-voice-work-info">
+        <div class="j-release-date-container">
+            <span class="j-icon j-icon-calendar"></span>
+            <span>@GetSomething(Product)</span>
+        </div>
+        <div class="j-wishlist-container">
+            <span class="j-icon j-icon-star j-icon-color-yellow"></span>
+            <span>@((Product.WishlistCount ?? 0).ToString("n0"))</span>
+        </div>
+        @if (Product.SalesDate is not null)
+        {
+            <div class="j-downloads-container">
+                <span class="j-icon j-icon-bag-fill j-icon-color-green"></span>
+                <span>@((Product.Downloads ?? 0).ToString("n0"))</span>
+            </div>
+        }
     </div>
 </div>
 
 @code {
     [Parameter]
     public required VoiceWorkSearchResult Product { get; set; }
+
+    private string GetSomething(VoiceWorkSearchResult voiceWork)
+    {
+        if (voiceWork.SalesDate.HasValue)
+        {
+            return voiceWork.SalesDate.Value.ToString("MMMM d, yyyy", CultureInfo.CurrentCulture);
+        }
+
+        if (voiceWork.PlannedReleaseDate.HasValue)
+        {
+            return voiceWork.PlannedReleaseDate.Value.ToString("MMMM d, yyyy", CultureInfo.CurrentCulture);
+        }
+
+        if (voiceWork.ExpectedDate.HasValue)
+        {
+            string part = voiceWork.ExpectedDate.Value.Day switch
+            {
+                21 => "Late",
+                11 => "Middle",
+                _ => "Early"
+            };
+
+            return $"{part} {voiceWork.ExpectedDate.Value.ToString("MMMM yyyy")}";
+        }
+
+        return "Unknown";
+    }
 }