function MainComponent() { const [inputValue, setInputValue] = React.useState(''); const [result, setResult] = React.useState(''); const handleKeyDown = (event)=>{ if (event.key === 'Enter') { calculateResult(); } }; const handleChange = (event)=>{ setInputValue(event.target.value); }; const addToInputValue = (value)=>{ setInputValue(inputValue + value); }; const calculateResult = ()=>{ try { setResult(String(eval(inputValue.replaceAll("√", "Math.sqrt").replaceAll("^", "**").replaceAll("abs", "Math.abs").replaceAll("cos", "Math.cos").replaceAll("sin", "Math.sin").replaceAll("tan", "Math.tan")))); } catch (e) { setResult('Error'); } }; const clearInput = ()=>{ setInputValue(''); setResult(''); }; const backspaceInput = ()=>{ setInputValue(inputValue.slice(0, -1)); }; const operationButtons = [ { symbol: '+', action: ()=>addToInputValue('+') }, { symbol: '-', action: ()=>addToInputValue('-') }, { symbol: '×', action: ()=>addToInputValue('*') }, { symbol: '÷', action: ()=>addToInputValue('/') }, { symbol: '√', action: ()=>addToInputValue('√(') }, { symbol: '|x|', action: ()=>addToInputValue('abs(') }, { symbol: 'cos', action: ()=>addToInputValue('cos(') }, { symbol: 'sin', action: ()=>addToInputValue('sin(') }, { symbol: 'tan', action: ()=>addToInputValue('tan(') }, { symbol: 'C', action: ()=>clearInput() }, { symbol: '←', action: ()=>backspaceInput() } ].sort((a, b)=>a.symbol.localeCompare(b.symbol)); const numberButtons = [ '7', '8', '9', '4', '5', '6', '1', '2', '3', '0', '.', '()' ].map((number)=>({ symbol: number, action: ()=>addToInputValue(number) })); const inputResultField = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col w-full px-4 py-3 bg-white border-b border-gray-200 rounded-t-3xl shadow-lg font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 58, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-2 text-xs text-gray-500 break-words", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, inputValue), /*#__PURE__*/ React.createElement("div", { className: "text-4xl break-words", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, result)); const inputTextField = /*#__PURE__*/ React.createElement("input", { className: "w-full px-4 py-3 text-3xl text-right bg-transparent border-none focus:outline-none font-roboto text-[#121212]", type: "text", name: "equation", value: inputValue, onChange: handleChange, onKeyDown: handleKeyDown, placeholder: "0", __source: { fileName: "", lineNumber: 65, columnNumber: 5 }, __self: this }); const button = ({ symbol, action })=>/*#__PURE__*/ React.createElement("button", { onClick: action, className: "flex items-center justify-center w-full h-20 mb-4 text-[#121212] bg-blue-300 rounded-xl shadow font-roboto hover:bg-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-300 text-3xl", __source: { fileName: "", lineNumber: 77, columnNumber: 5 }, __self: this }, symbol); const buttonGrid = /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-4 gap-4 p-4", __source: { fileName: "", lineNumber: 86, columnNumber: 5 }, __self: this }, numberButtons.concat(operationButtons).map((buttonInfo, idx)=>/*#__PURE__*/ React.createElement("div", { key: idx, className: `w-full ${buttonInfo.symbol === '=' ? 'col-span-4' : 'h-20'} font-roboto`, __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, button(buttonInfo)))); const calculatorContainerStyle = 'w-full max-w-2xl bg-white rounded-3xl shadow-2xl'; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center w-full min-h-screen p-4 bg-[#f5f7fa]", __source: { fileName: "", lineNumber: 98, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `${calculatorContainerStyle} p-4`, __source: { fileName: "", lineNumber: 99, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, inputResultField, inputTextField, buttonGrid)), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 107, columnNumber: 7 }, __self: this }, ` body { font-family: 'Roboto', sans-serif; background: #f5f7fa; } @media (max-width: 640px) { .${calculatorContainerStyle} { border-radius: 30px; width: calc(100vw - 20px); } } `)); }