ADD: begining of the inventory part

myBlazorApp/myBlazorApp/Components/InventoryItem.razor

@@ -0,0 +1,11 @@
+<div class="inventory-item">
+    @if (Item != null)
+    {
+        @Item.DisplayName
+    }
+    else
+    {
+        <p>Empty</p>
+    }
+</div>
+

myBlazorApp/myBlazorApp/Components/InventoryItem.razor.cs

@@ -0,0 +1,14 @@
+using System;
+namespace myBlazorApp.Components;
+using Microsoft.AspNetCore.Components;
+using myBlazorApp.Models;
+
+public partial class InventoryItem
+{
+    [Parameter]
+    public Item Item { get; set; }
+    [Parameter]
+    public int Index { get; set; }
+
+}
+

myBlazorApp/myBlazorApp/Components/InventoryItem.razor.css

@@ -0,0 +1,7 @@
+.inventory-item {
+    width: 64px;
+    height: 64px;
+    border: 1px solid;
+    overflow: hidden;
+    align-content:center
+}

myBlazorApp/myBlazorApp/Pages/Inventory.razor

@@ -1,6 +1,33 @@
 @page "/inventory"
+@using myBlazorApp.Components
 
 <h3>Inventory</h3>
 
 
+<div class="inventory-items">
+    <InventoryItem Index="0" Item=@itemsInventory.ElementAt(0)/>
+    <InventoryItem Index="1" />
+    <InventoryItem Index="2" />
+    <InventoryItem Index="3" />
+    <InventoryItem Index="4" />
+    <InventoryItem Index="5" />
+    <InventoryItem Index="6" />
+    <InventoryItem Index="7" />
+    <InventoryItem Index="8" />
+    <InventoryItem Index="9" />
+    <InventoryItem Index="10" />
+    <InventoryItem Index="11" />
+    <InventoryItem Index="12" />
+    <InventoryItem Index="13" />
+    <InventoryItem Index="14" />
+    <InventoryItem Index="15" />
+    <InventoryItem Index="16" />
+    <InventoryItem Index="17" />
+</div>
+<div class="css-grid">
 
+    @foreach (var item in itemsInventory)
+    {
+        <CraftingItem Item="item" NoDrop="true" />
+    }
+</div>

myBlazorApp/myBlazorApp/Pages/Inventory.razor.cs

@@ -1,8 +1,43 @@
 using System;
+using Blazored.Modal.Services;
+using Blazorise.DataGrid;
+using Microsoft.AspNetCore.Components;
+using Microsoft.Extensions.Localization;
+using myBlazorApp.Models;
+using myBlazorApp.Services;
+
 namespace myBlazorApp.Pages
 {
 	public partial class Inventory
     {
+
+        private List<Item> itemsInventory = new List<Item>();
+
+        private int totalItem;
+
+        [Inject]
+        public IDataService DataService { get; set; }
+
+        [Inject]
+        public IWebHostEnvironment WebHostEnvironment { get; set; }
+
+        [Inject]
+        public NavigationManager NavigationManager { get; set; }
+
+        [CascadingParameter]
+        public IModalService Modal { get; set; }
+
+        protected override async Task OnAfterRenderAsync(bool firstRender)
+        {
+            base.OnAfterRenderAsync(firstRender);
+
+            if (!firstRender)
+            {
+                return;
+            }
+            itemsInventory= await DataService.List(0, await DataService.Count());
+            StateHasChanged();
+        }
     }
 }
 

myBlazorApp/myBlazorApp/Pages/Inventory.razor.css

@@ -0,0 +1,6 @@
+.inventory-items {
+    grid-template-columns: repeat(6,minmax(0,1fr));
+    gap: 10px;
+    display: grid;
+    width: 40%;
+}