function MainComponent({ title, operation, onCalculate, result }) { const handleSubmit = (e)=>{ e.preventDefault(); const formData = new FormData(e.target); const number1 = parseFloat(formData.get('number1')); const number2 = parseFloat(formData.get('number2')); let calculationResult; switch(operation){ case 'Add': calculationResult = number1 + number2; break; case 'Subtract': calculationResult = number1 - number2; break; case 'Multiply': calculationResult = number1 * number2; break; case 'Divide': calculationResult = number2 !== 0 ? number1 / number2 : 'Error: Division by zero'; break; default: calculationResult = 'Invalid operation'; } onCalculate(calculationResult); }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-sm mx-auto shadow-lg p-5 rounded-md bg-[#f8f8f8]", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-center font-bold text-xl mb-4", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-3", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "number1", className: "text-sm font-medium", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "Number 1:"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "number1", name: "number1", className: "w-full p-2 border rounded-md", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "number2", className: "text-sm font-medium", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "Number 2:"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "number2", name: "number2", className: "w-full p-2 border rounded-md", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 text-white p-2 rounded-md hover:bg-blue-600", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, operation)), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-medium", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, "Result:"), /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, typeof result === 'number' ? result.toFixed(2) : result))); } function StoryComponent() { const [result, setResult] = React.useState("Result will be shown here"); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 53, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { title: "Addition Calculator", operation: "Add", onCalculate: (calculationResult)=>setResult(calculationResult), result: result, __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { title: "Subtraction Calculator", operation: "Subtract", onCalculate: (calculationResult)=>setResult(calculationResult), result: result, __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { title: "Multiplication Calculator", operation: "Multiply", onCalculate: (calculationResult)=>setResult(calculationResult), result: result, __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { title: "Division Calculator", operation: "Divide", onCalculate: (calculationResult)=>setResult(calculationResult), result: result, __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this })); }