function MainComponent() { const [input, setInput] = React.useState(''); const [result, setResult] = React.useState(''); const [advancedMode, setAdvancedMode] = React.useState(true); const handleInputChange = (e)=>{ setInput(e.target.value); }; const handleCalculation = (calculation)=>{ setInput((prevInput)=>prevInput + calculation); }; const calculateResult = ()=>{ try { setResult(Function('"use strict";return (' + input + ')')()); } catch (error) { setResult('Error'); } }; const clearInput = ()=>{ setInput(''); setResult(''); }; const advancedCalculations = [ { label: 'x²', value: '**2' }, { label: '√x', value: '**0.5' }, { label: 'π', value: '3.14159265359' }, { label: 'sin', value: 'Math.sin' }, { label: 'cos', value: 'Math.cos' }, { label: 'tan', value: 'Math.tan' } ]; const basicCalculations = [ { label: '+', value: '+' }, { label: '-', value: '-' }, { label: '*', value: '*' }, { label: '/', value: '/' }, { label: '(', value: '(' }, { label: ')', value: ')' } ]; const handleAdvancedCalculation = (calculation)=>{ setInput((prevInput)=>prevInput + calculation.value); }; const switchMode = ()=>{ setAdvancedMode(!advancedMode); }; return /*#__PURE__*/ React.createElement("div", { className: `w-full min-h-screen bg-[#121212] ${advancedMode ? 'text-white' : 'text-black'}`, __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-xl mb-4 p-2 rounded bg-[#424242] text-white", onClick: switchMode, __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, advancedMode ? 'Simple Mode' : 'Scientific Mode'), /*#__PURE__*/ React.createElement("div", { className: "border-b-2 border-gray-400", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "w-full bg-transparent text-right text-3xl p-2 outline-none", name: "calculationInput", value: input, onChange: handleInputChange, __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-right text-xl p-2", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, result)), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-4 gap-2", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, advancedMode ? [ ...advancedCalculations, ...basicCalculations ].map((calc, idx)=>/*#__PURE__*/ React.createElement("button", { key: idx, className: "p-3 m-1 bg-[#1c1c1c] rounded text-xl", onClick: ()=>handleAdvancedCalculation(calc), __source: { fileName: "", lineNumber: 74, columnNumber: 17 }, __self: this }, calc.label)) : basicCalculations.map((calc, idx)=>/*#__PURE__*/ React.createElement("button", { key: idx, className: "p-3 m-1 bg-[#1c1c1c] rounded text-xl", onClick: ()=>handleCalculation(calc.value), __source: { fileName: "", lineNumber: 83, columnNumber: 17 }, __self: this }, calc.label)), /*#__PURE__*/ React.createElement("button", { className: "col-span-2 p-3 m-1 bg-[#009688] rounded text-xl", onClick: calculateResult, __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, "="), /*#__PURE__*/ React.createElement("button", { className: "p-3 m-1 bg-[#f44336] rounded text-xl", onClick: clearInput, __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, "C"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 99, columnNumber: 7 }, __self: this }, ` body { transition: background-color 0.3s ease; } `)); }