function MainComponent() { const [items, setItems] = React.useState([]); const [itemName, setItemName] = React.useState(""); const handleAddItem = (e)=>{ e.preventDefault(); if (itemName.trim() === "") return; setItems([ ...items, itemName ]); setItemName(""); }; const handleDeleteItem = (itemIndex)=>{ const newItems = items.filter((_, index)=>index !== itemIndex); setItems(newItems); }; const handleItemNameChange = (e)=>setItemName(e.target.value); const inventoryGridStyle = { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(100px, 1fr))', gap: '0.5rem' }; return /*#__PURE__*/ React.createElement("div", { className: "font-mono bg-[#7B9F35] min-h-screen p-4 text-center", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#FFF] text-4xl font-bold mb-6", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, "Minecraft Inventory System"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleAddItem, className: "mb-8", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "border-[#374D1A] border-2 p-2 bg-[#6E8E30] text-white placeholder-white", type: "text", value: itemName, onChange: handleItemNameChange, placeholder: "Add a new item", name: "itemName", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "ml-4 border-[#374D1A] border-2 py-2 px-4 bg-[#6E8E30] text-white hover:bg-[#5C6E29]", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "Add Item")), /*#__PURE__*/ React.createElement("div", { style: inventoryGridStyle, __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, items.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border-[#374D1A] border-3 p-4 bg-[#8AAC31] relative", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "block truncate", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, item), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDeleteItem(index), className: "text-[#FF2F2F] absolute top-1 right-1", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "X")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, ` body { margin: 0; font-family: 'Minecraftia', sans-serif; } @font-face { font-family: 'Minecraftia'; src: url('/fonts/Minecraftia-Regular.ttf') format('truetype'); } `)); }