function MainComponent() { const [inputs, setInputs] = React.useState({ itemName: '', itemPrice: '', quantity: '' }); function handleChange(e) { const { name, value } = e.target; setInputs((prev)=>({ ...prev, [name]: value })); } function handleSubmit(e) { e.preventDefault(); // Here you would normally handle the submission, // such as sending the data to a backend or generating the bill. } const total = inputs.itemPrice && inputs.quantity ? (parseFloat(inputs.itemPrice) * parseInt(inputs.quantity)).toFixed(2) : ''; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f7f7f7] flex items-center justify-center p-4", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-lg rounded-lg p-6 w-full max-w-md", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "itemName", className: "block text-sm font-semibold text-gray-700", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, "Item Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "itemName", id: "itemName", value: inputs.itemName, onChange: handleChange, className: "mt-1 block w-full px-3 py-2 bg-gray-50 rounded-md shadow-sm focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "itemPrice", className: "block text-sm font-semibold text-gray-700", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, "Price"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "itemPrice", id: "itemPrice", value: inputs.itemPrice, onChange: handleChange, className: "mt-1 block w-full px-3 py-2 bg-gray-50 rounded-md shadow-sm focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "quantity", className: "block text-sm font-semibold text-gray-700", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "Quantity"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "quantity", id: "quantity", value: inputs.quantity, onChange: handleChange, className: "mt-1 block w-full px-3 py-2 bg-gray-50 rounded-md shadow-sm focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "pt-4", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full flex justify-center px-4 py-2 text-white bg-blue-600 rounded-md shadow-sm hover:bg-blue-700 focus:outline-none", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "Generate Bill")), /*#__PURE__*/ React.createElement("div", { className: "pt-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm font-semibold", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, "Total:"), /*#__PURE__*/ React.createElement("span", { className: "text-lg font-bold text-[#121212]", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "$", total))))); }