function MainComponent() { const [multiplicand, setMultiplicand] = React.useState(''); const [multiplier, setMultiplier] = React.useState(''); const [product, setProduct] = React.useState(null); const handleMultiplicandChange = (event)=>{ setMultiplicand(event.target.value); }; const handleMultiplierChange = (event)=>{ setMultiplier(event.target.value); }; const calculateProduct = (event)=>{ event.preventDefault(); const prod = Number(multiplicand) * Number(multiplier); setProduct(prod); }; let productDisplay; if (product !== null) { productDisplay = /*#__PURE__*/ React.createElement("div", { className: "flex mt-4 justify-center items-center", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "نتیجه ضرب: "), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-[#121212] ml-2", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, product)); } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center w-full min-h-screen bg-[#F7F7F7]", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: calculateProduct, className: "flex flex-col mt-10", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "multiplicand", className: "font-roboto text-[#121212] mb-2", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "مضروب:"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "multiplicand", name: "multiplicand", value: multiplicand, onChange: handleMultiplicandChange, className: "border-2 border-[#121212] p-2 mb-4 w-[300px] sm:w-[400px]", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "multiplier", className: "font-roboto text-[#121212] mb-2", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, "ضارب:"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "multiplier", name: "multiplier", value: multiplier, onChange: handleMultiplierChange, className: "border-2 border-[#121212] p-2 mb-6 w-[300px] sm:w-[400px]", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#121212] text-white p-3 w-[300px] sm:w-[400px]", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, "محاسبه")), productDisplay); }