function MainComponent() { const [formData, setFormData] = React.useState({ itemName: "", quantity: "", price: "", total: "" }); const handleChange = (e)=>{ const { name, value } = e.target; setFormData({ ...formData, [name]: value }); if (name === "quantity" || name === "price") { const quantity = name === "quantity" ? value : formData.quantity; const price = name === "price" ? value : formData.price; const total = quantity && price ? quantity * price : ""; setFormData((prevFormData)=>({ ...prevFormData, total: total.toString() })); } }; const handleSubmit = (e)=>{ e.preventDefault(); alert(`Submitting:\nItem Name: ${formData.itemName}\nQuantity: ${formData.quantity}\nPrice: ${formData.price}\nTotal: ${formData.total}`); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xl mx-auto my-10 p-5 bg-white shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-6 text-center text-[#121212] font-roboto", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, "Billing System"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "itemName", className: "block text-lg text-[#121212] font-roboto mb-2", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "Item Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "itemName", id: "itemName", className: "form-input w-full rounded-lg border-gray-300", placeholder: "Enter item name", value: formData.itemName, onChange: handleChange, __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", { htmlFor: "quantity", className: "block text-lg text-[#121212] font-roboto mb-2", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "Quantity"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "quantity", id: "quantity", className: "form-input w-full rounded-lg border-gray-300", placeholder: "0", value: formData.quantity, onChange: handleChange, __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "price", className: "block text-lg text-[#121212] font-roboto mb-2", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Price"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "price", id: "price", className: "form-input w-full rounded-lg border-gray-300", placeholder: "Enter price", value: formData.price, onChange: handleChange, __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "total", className: "block text-lg text-[#121212] font-roboto mb-2", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "Total"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "total", id: "total", className: "form-input w-full rounded-lg border-gray-300", placeholder: "Total will be calculated", value: formData.total, disabled: true, __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 rounded-lg bg-blue-500 text-white font-roboto hover:bg-blue-700 transition duration-150", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "Submit")))); }