Realization of the "Craft Table" page (it works)

src/CraftSharp/Components/Crafting.razor

@@ -1,23 +1,7 @@
 <CascadingValue Value="@this">
     <div class="container">
+        <div class="body">
             <div class="row">
-            <div class="col-6">
-                
-                <div>Available items:</div>
-                <div>
-                    <div class="css-grid">
-                        <CascadingValue Value="@this">
-                        @foreach (var item in Items)
-                        {
-                            <CraftingItem Item="item" NoDrop="true"/>
-                        }
-                        </CascadingValue>
-                    </div>
-                </div>
-
-            </div>
-
-            <div class="col-6">
                 <div>Recipe</div>
                 
                 <div>
@@ -40,6 +24,21 @@
                     <CraftingItem Item="RecipeResult"/>
                 </div>
             </div>
+            <div >
+                
+                <div>Available items:</div>
+                <div class="col-12">
+                    <div class="css-grid">
+                        
+                        @foreach (var item in Items)
+                        {
+                            <CraftingItem Item="item" NoDrop="true"/>
+                        }
+                    </div>
+                </div>
+
+            </div>
+
 
             <div class="col-12">
                 <div>Actions</div>

src/CraftSharp/Components/Crafting.razor.cs

@@ -10,9 +10,6 @@ namespace CraftSharp.Components
     {
         private Item _recipeResult;
 
-        [CascadingParameter]
-        public Crafting Parent { get; set; }
-
         public Crafting()
         {
             Actions = new ObservableCollection<CraftingAction>();

src/CraftSharp/Components/Crafting.razor.css

@@ -1,15 +1,17 @@
 .css-grid {
-    grid-template-columns: repeat(4,minmax(0,1fr));
+    grid-template-columns: repeat(10,minmax(0,1fr));
     gap: 10px;
     display: grid;
-    width: 286px;
+    height: 500px;
+    overflow: scroll;
+    border: 1px solid black;
 }
 
 .css-recipe {
     grid-template-columns: repeat(3,minmax(0,1fr));
-    gap: 10px;
+    gap: 20px;
     display: grid;
-    width: 212px;
+    width: 312px;
 }
 
 .actions {
@@ -17,3 +19,9 @@
     height: 250px;
     overflow: scroll;
 }
+
+.body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}

src/CraftSharp/Components/CraftingItem.razor

@@ -11,6 +11,7 @@
 
     @if (Item != null)
     {
-        @Item.DisplayName
+        <img src="data:image/png;base64, @(Item.ImageBase64)" title="@Item.DisplayName" alt="@Item.DisplayName" style="min-width: 64px; max-width: 64px" />
+        <p>@Item.DisplayName</p>
     }
 </div>

src/CraftSharp/Components/CraftingItem.razor.css

@@ -3,4 +3,17 @@
     height: 64px;
     border: 1px solid;
     overflow: hidden;
+    position: relative;
+}
+
+
+
+p {
+    position: absolute;
+    top: 0;
+    color: white;
+    text-align: center;
+    background-color: rgba(0, 0, 0, .4);
+    width: 64px;
+    font-size: .75em;
 }

src/CraftSharp/Pages/Crafting.razor

@@ -1,5 +0,0 @@
-@page "/Crafting"
-
-<div>
-    <Crafting Items="Items" Recipes="Recipes" />
-</div>

src/CraftSharp/Pages/TableDeCraft.razor

@@ -0,0 +1,8 @@
+@page "/tabledecraft"
+@using CraftSharp.Components
+
+<h1>Table de craft</h1>
+
+<div>
+    <Crafting Items="Items" Recipes="Recipes" />
+</div>

src/CraftSharp/Pages/TableDeCraft.razor.cs

@@ -5,7 +5,7 @@ using Microsoft.AspNetCore.Components;
 
 namespace CraftSharp.Pages
 {
-    public partial class Crafting
+    public partial class TableDeCraft
     {
         [Inject]
         public IDataService DataService { get; set; }

src/CraftSharp/Shared/HeaderLayout.razor

@@ -32,8 +32,8 @@
                     </NavLink>
                 </li>
                 <li class="nav-item">
-                    <NavLink class="nav-link" href="Crafting">
-                        <span class="oi oi-list-rich"></span> Table de craft
+                    <NavLink class="nav-link" href="Tabledecraft">
+                        <span class="oi oi-vertical-align-top"></span> Crafter
                     </NavLink>
                 </li>
             </ul>