function MainComponent() { const [inventory, setInventory] = React.useState([]); const [itemName, setItemName] = React.useState(''); const [quantity, setQuantity] = React.useState(''); const addItem = (event)=>{ event.preventDefault(); const newItem = { name: itemName, quantity: Number(quantity) }; setInventory([ ...inventory, newItem ]); setItemName(''); setQuantity(''); }; const handleItemNameChange = (event)=>{ setItemName(event.target.value); }; const handleQuantityChange = (event)=>{ setQuantity(event.target.value); }; const inventoryList = inventory.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex justify-between items-center p-2 border-b border-gray-200", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, item.name), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, item.quantity))); return /*#__PURE__*/ React.createElement("div", { className: "p-6 w-full max-w-[600px] mx-auto", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto text-[#121212] mb-6", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, "Inventory Management"), /*#__PURE__*/ React.createElement("form", { onSubmit: addItem, className: "mb-4", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto block mb-1 text-[#121212]", htmlFor: "itemName", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Item Name"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-gray-300 rounded", type: "text", id: "itemName", name: "itemName", value: itemName, onChange: handleItemNameChange, __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto block mb-1 text-[#121212]", htmlFor: "quantity", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "Quantity"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-gray-300 rounded", type: "number", id: "quantity", name: "quantity", value: quantity, onChange: handleQuantityChange, __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-3 bg-blue-500 text-white rounded font-roboto", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, "Add Item")), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto text-[#121212] mb-2", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, "Inventory List"), /*#__PURE__*/ React.createElement("div", { className: "max-h-[300px] overflow-auto", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, inventoryList))); }