function MainComponent() { const calculateTotal = (quantity)=>{ const pricePerUnit = 10; // example price per unit return quantity * pricePerUnit; }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 8, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "col-span-1", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-lg", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, "Produtos"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "produto1", className: "p-2 m-2 border border-gray-300", placeholder: "Produto 1", __source: { fileName: "", lineNumber: 13, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "produto2", className: "p-2 m-2 border border-gray-300", placeholder: "Produto 2", __source: { fileName: "", lineNumber: 14, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "produto3", className: "p-2 m-2 border border-gray-300", placeholder: "Produto 3", __source: { fileName: "", lineNumber: 15, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "col-span-1", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-lg", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, "Quantidade"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", name: "quantidade1", className: "p-2 m-2 border border-gray-300", placeholder: "Quantidade 1", onChange: (e)=>document.querySelector("input[name='total1']").value = calculateTotal(e.target.value), __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "quantidade2", className: "p-2 m-2 border border-gray-300", placeholder: "Quantidade 2", onChange: (e)=>document.querySelector("input[name='total2']").value = calculateTotal(e.target.value), __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "quantidade3", className: "p-2 m-2 border border-gray-300", placeholder: "Quantidade 3", onChange: (e)=>document.querySelector("input[name='total3']").value = calculateTotal(e.target.value), __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "col-span-1", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-lg", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "Totais"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "total1", className: "p-2 m-2 border border-gray-300", placeholder: "Total 1", readOnly: true, __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "total2", className: "p-2 m-2 border border-gray-300", placeholder: "Total 2", readOnly: true, __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "total3", className: "p-2 m-2 border border-gray-300", placeholder: "Total 3", readOnly: true, __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }))))); }