function MainComponent() { const [equation, setEquation] = React.useState(''); const [solution, setSolution] = React.useState(''); const handleEquationChange = (event)=>{ setEquation(event.target.value); }; const solveEquation = (event)=>{ event.preventDefault(); try { const sol = eval(equation); setSolution(sol.toString()); } catch (error) { setSolution('Invalid equation'); } }; const solutionClassName = solution !== '' ? "mt-4 p-4 border rounded bg-[#ECF0F1] text-[#34495E] font-roboto" : "hidden"; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#F7F7FF] flex flex-col items-center justify-center px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl sm:text-4xl font-bold mb-8 text-[#2C3E50] font-roboto", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, "Solve Math Equations"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-md sm:max-w-lg", onSubmit: solveEquation, __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col mb-4", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "equation", className: "text-lg mb-2 text-[#34495E] font-roboto", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, "Enter equation"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "equation", name: "equation", className: "px-4 py-2 border rounded border-[#D1D5DB] focus:outline-none focus:border-[#3498DB] text-lg text-[#34495E] font-roboto", value: equation, onChange: handleEquationChange, autoComplete: "off", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#3498DB] text-white py-2 rounded font-semibold uppercase hover:bg-[#2980B9] font-roboto", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "Solve"), /*#__PURE__*/ React.createElement("div", { className: solutionClassName, __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "Solution:"), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, solution)))); }