Updated CI for Blazor WebAssembly. Added styles for product cards.

JSMR.UI.Blazor/Pages/Home.razor

@@ -1,70 +1,84 @@
 @page "/"
 @inject VoiceWorksClient Client
 @using JSMR.Application.VoiceWorks.Queries.Search
+@using JSMR.UI.Blazor.Components
 @using JSMR.UI.Blazor.Services
 
 <PageTitle>Home</PageTitle>
 
 <MudTabs Elevation="2" Rounded="true" ApplyEffectsToContainer="true" PanelClass="pa-6">
     <MudTabPanel Text="Available" Icon="@Icons.Material.Filled.Home">
-        @if (availableVoiceWorks is null)
-        {
-            <p>Loading…</p>
-        }
-        else if (availableVoiceWorks.Length == 0)
-        {
-            <p>No results.</p>
-        }
-        else
-        {
-            <ul>
-                @foreach (var v in availableVoiceWorks)
-                {
-                    <li>@v.ProductId – @v.ProductName</li>
-                }
-            </ul>
-        }
+        <JProductCollection Products="availableVoiceWorks"></JProductCollection>
     </MudTabPanel>
     <MudTabPanel Text="Upcoming" Icon="@Icons.Material.Filled.ArrowUpward">
-        @if (upcomingVoiceWorks is null)
-        {
-            <p>Loading…</p>
-        }
-        else if (upcomingVoiceWorks.Length == 0)
-        {
-            <p>No results.</p>
-        }
-        else
-        {
-            <ul>
-                @foreach (var v in upcomingVoiceWorks)
-                {
-                    <li>@v.ProductId – @v.ProductName</li>
-                }
-            </ul>
-        }
+        <JProductCollection Products="upcomingVoiceWorks"></JProductCollection>
     </MudTabPanel>
     <MudTabPanel Text="Announcements" Icon="@Icons.Material.Filled.Home">
-        @if (announcedVoiceWorks is null)
-        {
-            <p>Loading…</p>
-        }
-        else if (announcedVoiceWorks.Length == 0)
-        {
-            <p>No results.</p>
-        }
-        else
-        {
-            <ul>
-                @foreach (var v in announcedVoiceWorks)
-                {
-                    <li>@v.ProductId – @v.ProductName</li>
-                }
-            </ul>
-        }
+        <JProductCollection Products="announcedVoiceWorks"></JProductCollection>
     </MudTabPanel>
 </MudTabs>
 
+<style>
+    .j-product-items-container {
+        display: flex;
+        flex-direction: column;
+        gap: 2rem;
+    }
+
+    .j-voice-work-card {
+        display: flex;
+        gap: 1rem;
+        background-image: linear-gradient(0deg, rgb(30, 53, 69), rgb(39, 59, 73));
+        border-color: rgb(63, 78, 88);
+        background-image: linear-gradient(0deg, rgb(30, 53, 69), rgb(57, 79, 94));
+    }
+
+    .j-voice-work-image-container {
+        width: 240px;
+        width: 300px;
+    }
+
+    .j-voice-work-card > .j-voice-work-image-container {
+        flex-shrink: 0;
+    }
+
+    .j-voice-work-image {
+        border-radius: 20px;
+    }
+
+    .j-voice-work-content {
+        display: flex;
+        flex-direction: column;
+        gap: .5rem;
+    }
+
+    .j-voice-work-card > .j-voice-work-content {
+        flex-grow: 1;
+    }
+
+    .j-product-title {
+        font-size: 1.25rem;
+        font-weight: 600;
+        font-family: "Poppins", "M+ 1p";
+        color: #d2dce6;
+        text-shadow: 1px 1px 2px black;
+    }
+
+    .j-product-description {
+        /* color: #7C8099; */
+        font-size: 1rem;
+        font-family: "Poppins", "M+ 1p";
+    }
+
+    .j-voice-work-info {
+        width: 240px;
+    }
+
+    .j-voice-work-card > .j-voice-work-info {
+        flex-shrink: 0;
+    }
+</style>
+
 @code {
     VoiceWorkSearchResult[]? availableVoiceWorks;
     VoiceWorkSearchResult[]? upcomingVoiceWorks;
@@ -143,7 +157,7 @@
                 },
                 SortOptions =
                 [
-                    //new(VoiceWorkSortField.Fa, Application.Common.Search.SortDirection.Ascending),
+                    new(VoiceWorkSortField.FavoriteCircle, Application.Common.Search.SortDirection.Ascending),
                     new(VoiceWorkSortField.WishlistCount, Application.Common.Search.SortDirection.Descending)
                 ]
             }