function MainComponent() { const [result, setResult] = React.useState(null); const handleSubmit = (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const num1 = parseFloat(formData.get('number1')); const num2 = parseFloat(formData.get('number2')); switch(event.nativeEvent.submitter.name){ case 'addition': setResult(num1 + num2); break; case 'subtraction': setResult(num1 - num2); break; default: setResult(null); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f4f8]", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-lg p-8 max-w-md w-full", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto text-center mb-6", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, "Calculator"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "number1", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, "Number 1"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "number1", id: "number1", className: "mt-1 p-2 w-full rounded-md border-gray-300 shadow-sm", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "number2", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "Number 2"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "number2", id: "number2", className: "mt-1 p-2 w-full rounded-md border-gray-300 shadow-sm", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mb-4", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", name: "addition", className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, "Add"), /*#__PURE__*/ React.createElement("button", { type: "submit", name: "subtraction", className: "bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, "Subtract")), result !== null && /*#__PURE__*/ React.createElement("div", { className: "text-center font-roboto text-lg", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, "Result: ", result)))); }