Add display type button

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor

@@ -1,8 +1,10 @@
 @using GameIdeas.BlazorApp.Shared.Components.Select
 @using GameIdeas.Shared.Dto
+@using GameIdeas.BlazorApp.Pages.Games.Models
 
 
 <EditForm EditContext="EditContext">
+    <div class="form-filter">
         <SelectList TItem="Func<GameDto, object>"
                     Headers="SortTypes"
                     Items="GameProperties"
@@ -10,13 +12,26 @@
                     HeaderChanged=HandleSortTypeChanged
                     Theme="SelectListTheme.Sort">
             <Button>
-            <div class="sort-button">
+                <div class="square-button">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <svg class="sort-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                    <path d="M18 21L14 17H17V7H14L18 3L22 7H19V17H22M2 19V17H12V19M2 13V11H9V13M2 7V5H6V7H2Z" />
+                        <path d="M10,13H22V11H10M10,19H22V17H10M10,7H22V5H10M6,7H8.5L5,3.5L1.5,7H4V17H1.5L5,20.5L8.5,17H6V7Z" />
                     </svg>
                 </div>
             </Button>
         </SelectList>
+
+        <div class="square-button" @onclick="@(() => HandleDisplayClicked(DisplayType.List))">
+            <svg class="list-icon @(DisplayType == DisplayType.List ? "selected-icon" : "")" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <path d="M4,5V7H21V5M4,11H21V9H4M4,19H21V17H4M4,15H21V13H4V15Z" />
+            </svg>
+        </div>
+
+        <div class="square-button" @onclick="@(() => HandleDisplayClicked(DisplayType.Card))">
+            <svg class="card-icon @(DisplayType == DisplayType.Card ? "selected-icon" : "")" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <path d="M16,5V11H21V5M10,11H15V5H10M16,18H21V12H16M10,18H15V12H10M4,18H9V12H4M4,11H9V5H4V11Z" />
+            </svg>
+        </div>
+    </div>
 </EditForm>
 
 

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.cs

@@ -1,12 +1,19 @@
+using GameIdeas.BlazorApp.Pages.Games.Models;
 using GameIdeas.BlazorApp.Shared.Components.Select;
 using GameIdeas.Shared.Dto;
 using GameIdeas.Shared.Enum;
+using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Forms;
 
 namespace GameIdeas.BlazorApp.Pages.Games.Filter;
 
 public partial class GameFilter
 {
+    [Parameter] public GameFilterParams GameFilterParams { get; set; } = new();
+    [Parameter] public EventCallback<GameFilterParams> GameFilterParamsChanged { get; set; }
+    [Parameter] public DisplayType DisplayType { get; set; }
+    [Parameter] public EventCallback<DisplayType> DisplayTypeChanged { get; set; }
+
     private readonly IEnumerable<SelectElement<Func<GameDto?, object?>>> SortTypes = [
         new() { Item = _ => SortType.Ascending, Label = "Ascendant", IsSelected = true },
         new() { Item = _ => SortType.Descending, Label = "Descendant" }
@@ -18,20 +25,24 @@ public partial class GameFilter
     ];
 
     private EditContext? EditContext;
-    private GameFilterParams GameFilterParams = new();
 
     protected override void OnInitialized()
     {
         EditContext = new EditContext(GameFilterParams);
-        EditContext.OnFieldChanged += HandleFormChanged;
+        EditContext.OnFieldChanged += async (s, e) =>
+        {
+            await GameFilterParamsChanged.InvokeAsync(GameFilterParams);
+        };
     }
 
-    private void HandleFormChanged(object? sender, FieldChangedEventArgs e)
-    {
-        throw new NotImplementedException();
-    }
     private void HandleSortTypeChanged(Func<GameDto?, object?> getHeader)
     {
         GameFilterParams.SortType = (SortType?)getHeader(null) ?? SortType.Ascending;
     }
+
+    private async Task HandleDisplayClicked(DisplayType displayType)
+    {
+        DisplayType = displayType;
+        await DisplayTypeChanged.InvokeAsync(displayType);
+    }
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css

@@ -1,4 +1,10 @@
-.sort-button {
+.form-filter {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+}
+
+.square-button {
     height: 28px;
     width: 28px;
     border-radius: var(--small-radius);
@@ -6,12 +12,34 @@
     overflow: hidden;
 }
 
-.sort-button svg {
+    .square-button:first-child {
+        margin-right: 16px;
+    }
+
+.square-button svg {
     fill: var(--white);
-    padding: 2px;
 }
 
-    .sort-button svg:hover {
+    .square-button svg:hover {
         cursor: pointer;
         background: var(--low-white);
     }
+
+.selected-icon {
+    fill: var(--violet) !important;
+}
+
+.sort-icon {
+    padding: 2px;
+}
+
+.list-icon {
+    padding-right: 1px;
+    padding-top: 0.5px;
+    padding-bottom: 0.5px;
+}
+
+.card-icon {
+    padding-top: 1px;
+    padding-right: 1px;
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor

@@ -11,6 +11,6 @@
 
 <HeaderLayout>
     <Body>
-        <GameFilter />
+        <GameFilter @bind-DisplayType=DisplayType />
     </Body>
 </HeaderLayout>

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.cs

@@ -1,6 +1,8 @@
+using GameIdeas.BlazorApp.Pages.Games.Models;
+
 namespace GameIdeas.BlazorApp.Pages.Games;
 
 public partial class GamesBase ()
 {
-
+    private DisplayType DisplayType = DisplayType.List;
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/DisplayType.cs

@@ -0,0 +1,7 @@
+namespace GameIdeas.BlazorApp.Pages.Games.Models;
+
+public enum DisplayType
+{
+    Card,
+    List
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css

@@ -34,7 +34,7 @@
 
 /***** Sort Theme *****/
 .select-content.sort {
-    background: var(--black);
+    background: var(--semi-black);
     box-shadow: var(--drop-shadow);
     padding: 4px 0;
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css

@@ -8,7 +8,7 @@
     --yellow: #FFC107;
     --green: #43F8C0;
     --light-grey: #5C5C5E;
-    --black: rgba(44, 43, 46, 0.8);
+    --black: rgba(0, 0, 0, 0.8);
     --white: #fff;
     --low-white: rgb(255, 255, 255, 0.1);
     --semi-black: rgba(0, 0, 0, 0.5);