function MainComponent() { const [number, setNumber] = React.useState(''); const handleClick = (numeral)=>{ setNumber((prev)=>prev + numeral); }; const handleClear = ()=>{ setNumber(''); }; const handleCalculate = ()=>{ const romanToInt = (s)=>{ const roman = { I: 1, V: 5, X: 10, L: 50, C: 100, D: 500, M: 1000 }; let total = 0; for(let i = 0; i < s.length; i++){ const current = roman[s[i]]; const next = roman[s[i + 1]]; if (next && current < next) { total -= current; } else { total += current; } } return total; }; setNumber(romanToInt(number).toString()); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#FAF3DD]", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-papyrus mb-10", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, "Ancient Calculator"), /*#__PURE__*/ React.createElement("div", { className: "bg-[#8D8741] shadow-lg rounded-lg p-8", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 mb-6", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "number1", className: "w-full p-2 text-[#DA7B93] text-2xl bg-[#FAE1DD] border border-[#8D8741] rounded", value: number, readOnly: true, __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleClick('I'), className: "p-4 bg-[#F4D35E] rounded shadow text-2xl font-papyrus", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "I"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleClick('V'), className: "p-4 bg-[#F4D35E] rounded shadow text-2xl font-papyrus", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "V"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleClick('X'), className: "p-4 bg-[#F4D35E] rounded shadow text-2xl font-papyrus", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "X"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleClick('L'), className: "p-4 bg-[#F4D35E] rounded shadow text-2xl font-papyrus", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "L"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleClick('C'), className: "p-4 bg-[#F4D35E] rounded shadow text-2xl font-papyrus", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "C"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleClick('D'), className: "p-4 bg-[#F4D35E] rounded shadow text-2xl font-papyrus", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "D"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleClick('M'), className: "p-4 bg-[#F4D35E] rounded shadow text-2xl font-papyrus", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "M"), /*#__PURE__*/ React.createElement("button", { onClick: handleClear, className: "col-span-2 p-4 bg-[#EE964B] rounded shadow text-2xl font-papyrus", name: "clear", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "Clear"), /*#__PURE__*/ React.createElement("button", { onClick: handleCalculate, className: "col-span-3 p-4 bg-[#30638E] rounded shadow text-2xl font-papyrus", name: "calculate", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "Calculate")))); }