function MainComponent() { const [inputValue, setInputValue] = React.useState(''); const [result, setResult] = React.useState(''); const handleInputChange = (event)=>{ setInputValue(event.target.value); }; const calculateResult = ()=>{ try { setResult(eval(inputValue).toString()); } catch (e) { setResult('Error'); } }; const handleKeyPress = (event)=>{ if (event.key === 'Enter') { calculateResult(); } }; const clearInput = ()=>{ setInputValue(''); setResult(''); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-[#f7f7f7]", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md p-4 bg-white rounded shadow-md", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-3", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "calculatorInput", value: inputValue, onChange: handleInputChange, onKeyPress: handleKeyPress, className: "w-full px-3 py-2 border-2 border-gray-300 rounded focus:outline-none focus:border-blue-500", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: calculateResult, className: "px-4 py-2 bg-blue-500 hover:bg-blue-700 text-white font-semibold rounded", type: "button", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "Calculate"), /*#__PURE__*/ React.createElement("button", { onClick: clearInput, className: "px-4 py-2 ml-2 bg-gray-300 hover:bg-gray-500 text-gray-700 font-semibold rounded", type: "button", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "Clear")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#121212] font-roboto", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "Result: ", /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 59, columnNumber: 21 }, __self: this }, result))))); }