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

JSMR.UI.Blazor/Components/JImage.razor

@@ -1,5 +1,5 @@
 <div class="@ContainerClassees">
-    <div class="j-image-overlay"></div>
+    <div class="@OverlayClasses"></div>
     <img class="@ImageClasses" loading="@LoadingAttribute" src="@Source" @onload="OnImageLoaded">
 </div>
 
@@ -16,6 +16,9 @@
     [Parameter]
     public string? ContainerClass { get; set; }
 
+    [Parameter]
+    public string? OverlayClass { get; set; }
+
     [Parameter]
     public string? ImageClass { get; set; }
 
@@ -23,6 +26,7 @@
     private string? _lastSource;
 
     private string ContainerClassees => GetContainerClasses();
+    private string OverlayClasses => GetOverlayClasses();
     private string ImageClasses => GetImageClasses();
 
     private string? LoadingAttribute => LazyLoading ? "lazy" : null;
@@ -54,6 +58,24 @@
         return string.Join(" ", classNames);
     }
 
+    private string GetOverlayClasses()
+    {
+        List<string> classNames = ["j-image-overlay"];
+
+        if (!string.IsNullOrEmpty(OverlayClass))
+        {
+            List<string> customClassNames = OverlayClass
+                .Split(" ")
+                .Select(className => className.Trim())
+                .Where(className => !string.IsNullOrWhiteSpace(className))
+                .ToList();
+
+            classNames.AddRange(customClassNames);
+        }
+
+        return string.Join(" ", classNames);
+    }
+
     private string GetImageClasses()
     {
         List<string> classNames = ["j-image"];

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";
+    }
 }