function CalculateButton({ onClick, label }) { return /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white p-2 rounded", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, label); } function CalculateButtonStory() { const handleCalculate = ()=>{ console.log("Calculating..."); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CalculateButton, { onClick: handleCalculate, label: "Calculate", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this })); } function MainComponent() { const [num1, setNum1] = React.useState(""); const [num2, setNum2] = React.useState(""); const [num3, setNum3] = React.useState(""); const [middleValue, setMiddleValue] = React.useState(null); const [halfMiddleValue, setHalfMiddleValue] = React.useState(null); const handleCalculate = ()=>{ const values = [ parseFloat(num1), parseFloat(num2), parseFloat(num3) ].sort((a, b)=>a - b); const middleVal = values[1]; const halfMiddleVal = middleVal / 2; setMiddleValue(middleVal); setHalfMiddleValue(halfMiddleVal); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-white rounded shadow-md", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, "Calculate Middle Value"), /*#__PURE__*/ React.createElement("input", { className: "border p-2 mb-2", type: "number", name: "num1", value: num1, onChange: (e)=>setNum1(e.target.value), placeholder: "Enter first number", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "border p-2 mb-2", type: "number", name: "num2", value: num2, onChange: (e)=>setNum2(e.target.value), placeholder: "Enter second number", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "border p-2 mb-2", type: "number", name: "num3", value: num3, onChange: (e)=>setNum3(e.target.value), placeholder: "Enter third number", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(CalculateButton, { onClick: handleCalculate, label: "Calculate", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }), middleValue !== null && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, "Middle Value: ", middleValue), /*#__PURE__*/ React.createElement("p", { className: "text-lg mt-2", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, "Half of Middle Value: ", halfMiddleValue)))); }