function MainComponent() { const [calculation, setCalculation] = React.useState(""); const [result, setResult] = React.useState(""); const doCalculation = ()=>{ if (calculation.trim() === "") { setResult('Invalid input. Please enter a valid calculation.'); return; } try { const evalResult = eval(calculation); setResult(String(evalResult)); } catch (error) { setResult('Invalid calculation.'); } }; const handleChange = (e)=>{ setCalculation(e.target.value); }; const handleInput = (input)=>{ setCalculation(calculation + input); }; const backspace = ()=>{ setCalculation(calculation.slice(0, -1)); }; const numbers = [ { num: 1, label: '1' }, { num: 2, label: '2' }, { num: 3, label: '3' }, { num: 4, label: '4' }, { num: 5, label: '5' }, { num: 6, label: '6' }, { num: 7, label: '7' }, { num: 8, label: '8' }, { num: 9, label: '9' }, { num: 0, label: '0', span: 'col-span-2' } ]; const actions = [ { action: '+', label: '+', icon: 'fa-plus' }, { action: '-', label: '−', icon: 'fa-minus' }, { action: '*', label: '×', icon: 'fa-times' }, { action: '/', label: '÷', icon: 'fa-divide' } ]; return /*#__PURE__*/ React.createElement("div", { className: "flex min-h-screen items-center justify-center bg-[#f7f7f7] p-4", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row w-full max-w-2xl p-6 bg-white rounded shadow-md", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 pr-4 space-y-4", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-semibold mb-6 text-center text-[#121212] font-roboto", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "🖩 Calculator"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "calculation", value: calculation, onChange: handleChange, className: "w-full p-3 border rounded text-lg mb-4 font-roboto", placeholder: "Enter calculation", autoComplete: "off", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-2 mb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, numbers.map((number)=>/*#__PURE__*/ React.createElement("button", { key: number.num, onClick: ()=>handleInput(number.label), className: `bg-[#dee2e6] text-[#495057] p-[13px] rounded font-roboto ${number.span || ""} hover:bg-[#ced4da] transition-colors duration-200`, __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, number.num))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end space-x-2", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: doCalculation, className: "bg-[#28a745] text-white px-4 py-2 rounded font-roboto hover:bg-[#218838] transition-colors duration-200", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, "=")), /*#__PURE__*/ React.createElement("div", { className: "p-3 border rounded bg-[#d4edda] text-[#155724] font-roboto", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, "Result: ", result)), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-2 mt-4 md:mt-0", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, actions.map((action)=>/*#__PURE__*/ React.createElement("button", { key: action.action, onClick: ()=>handleInput(action.action), className: "bg-[#007bff] text-white p-3 rounded flex items-center justify-center gap-x-2 font-roboto hover:bg-[#0069d9] transition-colors duration-200", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${action.icon}`, __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }), action.label))))); }