function MainComponent() { const [passcode, setPasscode] = React.useState([ "", "", "", "", "", "" ]); const handleClick = (num)=>{ setPasscode((prev)=>{ const updated = [ ...prev ]; const index = updated.findIndex((item)=>item === ""); if (index !== -1) { updated[index] = num; } return updated; }); }; const numbers = [ [ "1", "2", "3" ], [ "4", "5", "6" ], [ "", "7", "0" ] ]; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex flex-col items-center justify-center bg-[#f2f2f7] p-4", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full flex justify-end p-4", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "relative/path/to/avatar.jpg", alt: "User Avatar", className: "w-[40px] h-[40px] rounded-full", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded shadow-lg w-[90%] max-w-[400px]", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#1c1c1e] text-2xl font-semibold font-roboto mb-6 text-center", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "Enter Passcode"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mb-6 space-x-2", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, passcode.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "w-[20px] h-[20px] text-center text-2xl", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, item ? "●" : "○"))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, numbers.map((row, rowIndex)=>row.map((num, colIndex)=>/*#__PURE__*/ React.createElement("button", { key: `${rowIndex}-${colIndex}`, name: `button-${num}`, onClick: ()=>num && handleClick(num), className: `bg-[#d1d1d6] text-xl font-semibold py-2 px-4 rounded-full ${num === "" ? "opacity-0 cursor-default" : ""}`, __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, num)))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mt-4", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { name: "change-design", className: "bg-[#007aff] text-white px-4 py-2 rounded-full", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "Change Design")))); }