add icons to inventory tabs

1 files changed, 40 insertions, 7 deletions

diff --git a/src/lib/sections/Inventories.svelte b/src/lib/sections/Inventories.svelte
index e84950a..1f30255 100644
--- a/src/lib/sections/Inventories.svelte
+++ b/src/lib/sections/Inventories.svelte
@@ -2,6 +2,7 @@
 	import Inventory from '$lib/minecraft/Inventory.svelte'
 	import { fade } from 'svelte/transition'
 	import { cleanId } from '$lib/utils'
+	import { skyblockItemToUrl } from '$lib/minecraft/inventory'
 
 	export let data
 	export let pack
@@ -11,6 +12,15 @@
 		if (inventoryName !== 'armor') displayingInventories.push(inventoryName)
 
 	let selectedInventoryName: string = displayingInventories[0]
+
+	const inventoryIconMap = {
+		inventory: 'nether_star',
+		ender_chest: 'ender_chest',
+		potion_bag: 'potion',
+		fishing_bag: 'cod',
+		quiver: 'arrow',
+		wardrobe: 'leather_chestplate',
+	}
 </script>
 
 <div id="inventory-tabs">
@@ -20,7 +30,15 @@
 			class:inventory-tab-active={inventoryName === selectedInventoryName}
 			on:click={() => (selectedInventoryName = inventoryName)}
 		>
-			{cleanId(inventoryName)}
+			{#if inventoryName in inventoryIconMap}
+				<img
+					class="inventory-tab-icon"
+					loading="lazy"
+					src={skyblockItemToUrl(inventoryIconMap[inventoryName])}
+					alt={cleanId(inventoryName)}
+				/>
+			{/if}
+			<span class="inventory-tab-name">{cleanId(inventoryName)}</span>
 		</button>
 	{/each}
 </div>
@@ -37,20 +55,35 @@
 		margin-bottom: 1em;
 		overflow: hidden;
 		border-radius: 1em;
-		max-width: max-content;
-		width: min(40em, 100%);
+		max-width: 40em;
+		/* box-shadow: 0 0 1em #000; */
 	}
 	.inventory-tab {
-		background-color: var(--theme-lighter-background);
+		/* background-color: var(--theme-lighter-background); */
+		background-color: rgba(20, 20, 20, 0.4);
 		color: var(--theme-main-text);
 		border: none;
-		padding: 1em;
+		border-radius: 0;
+		/* padding: 0.8em; */
 		cursor: pointer;
 		transition-duration: 200ms;
-		
+		height: 2.5em;
+		vertical-align: middle;
+	}
+	.inventory-tab-icon {
+		height: 1.5em;
+		width: 1.5em;
+		vertical-align: text-bottom;
+		position: relative;
+		top: 0.1em;
+		image-rendering: crisp-edges;
+		image-rendering: pixelated;
+	}
+	.inventory-tab-name {
+		vertical-align: middle;
 	}
 	.inventory-tab:hover,
 	.inventory-tab-active {
-		background-color: var(--theme-lightest-background);
+		background-color: rgba(20, 20, 20, 0.9);
 	}
 </style>