function MainComponent() { const [result, setResult] = React.useState(''); const handleCalculation = (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const xValue = parseFloat(formData.get('xValue')); const hValue = parseFloat(formData.get('hValue')); const finiteDifference = (Math.sin(xValue + hValue) - Math.sin(xValue)) / hValue; setResult(finiteDifference.toFixed(4)); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-white shadow-lg rounded-md", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, "حل تفاضل محدود"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleCalculation, className: "space-y-4", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "xValue", className: "block mb-2", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, "قيمة x (x value):"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "xValue", name: "xValue", step: "any", required: true, className: "px-4 py-2 border rounded-md w-full", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "hValue", className: "block mb-2", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, "قيمة h (h value):"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "hValue", name: "hValue", step: "any", required: true, className: "px-4 py-2 border rounded-md w-full", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#007bff] text-white px-4 py-2 rounded-md", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "احسب (Calculate)")), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-medium", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "النتيجة (Result):"), /*#__PURE__*/ React.createElement("output", { className: "block mt-2 text-lg font-roboto", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, result)))); }