+ @if (Item is not null && IsInList)
+ {
+
+

+
@Item.DisplayName
+
+ }
+ @if (InventoryModel is not null && IsInInventory)
+ {
+
+ @if (InventoryModel.NumberItem > 0)
+ {
+
+

+
+
@InventoryModel.NumberItem
+ }
+
+ }
+
diff --git a/blazor_lab/Components/InventoryItem.razor.cs b/blazor_lab/Components/InventoryItem.razor.cs
new file mode 100644
index 0000000..c40dd1d
--- /dev/null
+++ b/blazor_lab/Components/InventoryItem.razor.cs
@@ -0,0 +1,96 @@
+using Blazorise.Extensions;
+using Microsoft.AspNetCore.Components;
+using Minecraft.Crafting.Api.Models;
+using Item = blazor_lab.Models.Item;
+
+namespace blazor_lab.Components
+{
+ public partial class InventoryItem
+ {
+ [Parameter]
+ public Item? Item { get; set; }
+
+ [Parameter]
+ public int Position { get; set; } = -1;
+
+ [Parameter]
+ public bool IsInList { get; set; }
+
+ [Parameter]
+ public bool IsInInventory { get; set; }
+
+ [CascadingParameter]
+ public InventoryList? ListParent { get; set; }
+
+ [CascadingParameter]
+ public Inventory? InventoryParent { get; set; }
+
+ public InventoryModel? InventoryModel { get; set; } = new InventoryModel();
+
+ public InventoryItem()
+ {
+ if (IsInInventory)
+ {
+ InventoryModel.ImageBase64 = null;
+ InventoryModel.ItemName = "";
+ InventoryModel.NumberItem = 0;
+ InventoryModel.Position = Position;
+ }
+ }
+
+ internal void OnDrop()
+ {
+ if (IsInList)
+ {
+ ListParent!.Parent.CurrentDragItem = null;
+ return;
+ }
+
+ if (IsInInventory)
+ {
+ InventoryModel ??= new();
+ if (InventoryModel.ItemName.IsNullOrEmpty()) // new inventoryModel
+ {
+ InventoryModel.ImageBase64 = InventoryParent!.CurrentDragItem!.ImageBase64;
+ InventoryModel.ItemName = InventoryParent!.CurrentDragItem!.ItemName;
+ InventoryModel.Position = Position;
+ InventoryModel.NumberItem = 1;
+ InventoryParent.InventoryContent.Insert(Position, InventoryModel);
+ }
+ else
+ {
+ if (InventoryModel.ItemName == InventoryParent!.CurrentDragItem!.ItemName) // adding to an existing stack
+ {
+ InventoryModel.NumberItem += 1;
+ }
+ }
+ InventoryParent!.CurrentDragItem = null;
+ }
+ }
+
+ private void OnDragStart()
+ {
+ if (IsInList)
+ {
+ ListParent!.Parent.CurrentDragItem = new InventoryModel
+ {
+ ImageBase64 = Item!.ImageBase64,
+ ItemName = Item!.DisplayName,
+ NumberItem = 1,
+ Position = -1
+ };
+ }
+ else if (IsInInventory) // delete item stack if it is dragged from inventory
+ {
+ InventoryModel = new InventoryModel
+ {
+ ImageBase64 = null,
+ ItemName = "",
+ NumberItem = 0,
+ Position = Position
+ };
+ InventoryParent!.CurrentDragItem = null;
+ }
+ }
+ }
+}
diff --git a/blazor_lab/Components/InventoryItem.razor.css b/blazor_lab/Components/InventoryItem.razor.css
new file mode 100644
index 0000000..43cae0e
--- /dev/null
+++ b/blazor_lab/Components/InventoryItem.razor.css
@@ -0,0 +1,39 @@
+.inventory-list-item {
+ display: flex;
+ flex-direction: row;
+ margin-bottom: 10px;
+ padding: 10px;
+ border: 1px solid #ddd;
+ border-radius: 5px;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+ .inventory-list-item img {
+ max-width: 64px;
+ max-height: 64px;
+ margin-right: 10px;
+ }
+
+.inventory-grid-item {
+ display: flex;
+ flex-grow: 1;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border: 1px solid #ddd;
+ height: 64px;
+ width: 64px;
+}
+
+ .inventory-grid-item .slot-image {
+ font-weight: bold;
+ font-size: small;
+ }
+
+ .inventory-grid-item .slot-count {
+ font-size: small;
+ }
+
+ .inventory-grid-item .item-name {
+ font-weight: bold;
+ }
diff --git a/blazor_lab/Components/InventoryList.razor b/blazor_lab/Components/InventoryList.razor
index 610ebfd..288aace 100644
--- a/blazor_lab/Components/InventoryList.razor
+++ b/blazor_lab/Components/InventoryList.razor
@@ -1,4 +1,6 @@
-