function MainComponent() { const [items, setItems] = React.useState([ { name: 'Ink', quantity: 10, price: '$20', vendor: 'Vendor A', brand: 'Brand X' }, { name: 'Needles', quantity: 50, price: '$5', vendor: 'Vendor B', brand: 'Brand Y' }, { name: 'Gloves', quantity: 40, price: '$10', vendor: 'Vendor C', brand: 'Brand Z' } ]); const handleAdd = (index)=>{ const newItems = [ ...items ]; newItems[index].quantity += 1; setItems(newItems); }; const handleSubtract = (index)=>{ const newItems = [ ...items ]; if (newItems[index].quantity > 0) { newItems[index].quantity -= 1; } setItems(newItems); }; const handleInputChange = (index, field, value)=>{ const newItems = [ ...items ]; newItems[index][field] = value; setItems(newItems); }; const handleAddNewItem = ()=>{ const newItems = [ ...items, { name: '', quantity: 0, price: '', vendor: '', brand: '' } ]; setItems(newItems); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#F5F5F5] p-4 font-roboto text-[#333]", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-6", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "logo.png", alt: "Tattoo shop logo", className: "w-[200px] mx-auto", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center mb-6 text-[#e63946]", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, "Tattoo Supplies Inventory"), /*#__PURE__*/ React.createElement("div", { className: "container mx-auto", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "table-auto w-full border-collapse border border-gray-200", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "bg-[#a8dadc]", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border border-gray-200 p-2", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, "Item"), /*#__PURE__*/ React.createElement("th", { className: "border border-gray-200 p-2", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, "Quantity"), /*#__PURE__*/ React.createElement("th", { className: "border border-gray-200 p-2", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, "Price"), /*#__PURE__*/ React.createElement("th", { className: "border border-gray-200 p-2", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, "Vendor"), /*#__PURE__*/ React.createElement("th", { className: "border border-gray-200 p-2", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, "Brand"), /*#__PURE__*/ React.createElement("th", { className: "border border-gray-200 p-2", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, "Actions"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, items.map((item, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, className: "bg-white even:bg-gray-50", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border border-gray-200 p-2", __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: item.name, onChange: (e)=>handleInputChange(index, 'name', e.target.value), name: `name-${index}`, className: "w-full border rounded px-2 py-1", placeholder: "Item Name", __source: { fileName: "", lineNumber: 55, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "border border-gray-200 p-2", __source: { fileName: "", lineNumber: 64, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", value: item.quantity, onChange: (e)=>handleInputChange(index, 'quantity', e.target.value), name: `quantity-${index}`, className: "w-full border rounded px-2 py-1", placeholder: "Quantity", __source: { fileName: "", lineNumber: 65, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "border border-gray-200 p-2", __source: { fileName: "", lineNumber: 74, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: item.price, onChange: (e)=>handleInputChange(index, 'price', e.target.value), name: `price-${index}`, className: "w-full border rounded px-2 py-1", placeholder: "Price", __source: { fileName: "", lineNumber: 75, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "border border-gray-200 p-2", __source: { fileName: "", lineNumber: 84, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: item.vendor, onChange: (e)=>handleInputChange(index, 'vendor', e.target.value), name: `vendor-${index}`, className: "w-full border rounded px-2 py-1", placeholder: "Vendor", __source: { fileName: "", lineNumber: 85, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "border border-gray-200 p-2", __source: { fileName: "", lineNumber: 94, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: item.brand, onChange: (e)=>handleInputChange(index, 'brand', e.target.value), name: `brand-${index}`, className: "w-full border rounded px-2 py-1", placeholder: "Brand", __source: { fileName: "", lineNumber: 95, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "border border-gray-200 p-2 flex justify-center space-x-2", __source: { fileName: "", lineNumber: 104, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#e63946] text-white px-2 py-1 rounded hover:bg-red-600", onClick: ()=>handleSubtract(index), name: `subtract-${item.name}`, __source: { fileName: "", lineNumber: 105, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-minus", __source: { fileName: "", lineNumber: 110, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "bg-[#2a9d8f] text-white px-2 py-1 rounded hover:bg-green-600", onClick: ()=>handleAdd(index), name: `add-${item.name}`, __source: { fileName: "", lineNumber: 112, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus", __source: { fileName: "", lineNumber: 117, columnNumber: 21 }, __self: this }))))))), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-6", __source: { fileName: "", lineNumber: 124, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#1d3557] text-white px-4 py-2 rounded hover:bg-blue-700", onClick: handleAddNewItem, name: "add-new-item", __source: { fileName: "", lineNumber: 125, columnNumber: 11 }, __self: this }, "Add New Item")))); }

Item	Quantity	Price	Vendor	Brand	Actions