function MainComponent() { const [inventory, setInventory] = React.useState([ { name: "Sample Item 1", type: "Top", color: "Blue", size: "M" }, { name: "Sample Item 2", type: "Bottom", color: "Black", size: "L" } ]); const handleSubmit = (e)=>{ e.preventDefault(); const newItem = { name: e.target["item-name"].value, type: e.target["item-type"].value, color: e.target["item-color"].value, size: e.target["item-size"].value }; setInventory([ ...inventory, newItem ]); e.target.reset(); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f7f7f7] p-8", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold font-roboto text-center mb-8", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, "Personal Clothing Inventory Management"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "bg-white p-6 rounded-lg shadow-md max-w-lg mx-auto", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-bold mb-2", htmlFor: "item-name", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, "Item Name"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight", id: "item-name", name: "item-name", type: "text", placeholder: "Enter clothing item name", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-bold mb-2", htmlFor: "item-type", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "Item Type"), /*#__PURE__*/ React.createElement("select", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight", id: "item-type", name: "item-type", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "top", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "Top"), /*#__PURE__*/ React.createElement("option", { value: "bottom", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, "Bottom"), /*#__PURE__*/ React.createElement("option", { value: "footwear", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, "Footwear"), /*#__PURE__*/ React.createElement("option", { value: "accessory", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, "Accessory"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-bold mb-2", htmlFor: "item-color", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "Color"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight", id: "item-color", name: "item-color", type: "text", placeholder: "Enter item color", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-bold mb-2", htmlFor: "item-size", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "Size"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight", id: "item-size", name: "item-size", type: "text", placeholder: "Enter item size", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50", type: "submit", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Add Item"))), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold font-roboto mb-4", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, "Inventory List"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full bg-white", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "bg-gray-200", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "py-2 px-4 border-b text-left", __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this }, "Item Name"), /*#__PURE__*/ React.createElement("th", { className: "py-2 px-4 border-b text-left", __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }, "Type"), /*#__PURE__*/ React.createElement("th", { className: "py-2 px-4 border-b text-left", __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this }, "Color"), /*#__PURE__*/ React.createElement("th", { className: "py-2 px-4 border-b text-left", __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this }, "Size"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, inventory.map((item, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, __source: { fileName: "", lineNumber: 64, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "py-2 px-4 border-b", __source: { fileName: "", lineNumber: 65, columnNumber: 19 }, __self: this }, item.name), /*#__PURE__*/ React.createElement("td", { className: "py-2 px-4 border-b", __source: { fileName: "", lineNumber: 66, columnNumber: 19 }, __self: this }, item.type), /*#__PURE__*/ React.createElement("td", { className: "py-2 px-4 border-b", __source: { fileName: "", lineNumber: 67, columnNumber: 19 }, __self: this }, item.color), /*#__PURE__*/ React.createElement("td", { className: "py-2 px-4 border-b", __source: { fileName: "", lineNumber: 68, columnNumber: 19 }, __self: this }, item.size)))))))); }

Item Name	Type	Color	Size
Sample Item 1	Top	Blue	M
Sample Item 2	Bottom	Black	L