function MainComponent() { const [selectedProfile, setSelectedProfile] = React.useState(null); const [pin, setPin] = React.useState(''); const profiles = [ { id: 1, avatar: '/avatars/child1.png', username: 'KidOne', level: 'Grade 1' }, { id: 2, avatar: '/avatars/child2.png', username: 'KidTwo', level: 'Grade 2' } ]; const handleSelectProfile = (profile)=>{ setSelectedProfile(profile); }; const handlePinChange = (e)=>{ setPin(e.target.value); }; const handleAccessAccount = (e)=>{ e.preventDefault(); // Access account logic here }; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-4 p-4", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, profiles.map((profile)=>/*#__PURE__*/ React.createElement("button", { key: profile.id, onClick: ()=>handleSelectProfile(profile), className: "flex flex-col items-center w-[100px] sm:w-[150px] p-2 bg-[#f0f0f0] rounded-lg shadow-md hover:bg-[#e0e0e0] focus:outline-none focus:ring-2 focus:ring-[#a0a0a0] max-w-xs", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: profile.avatar, alt: `Avatar of ${profile.username}`, className: "w-[80px] h-[80px] sm:w-[120px] sm:h-[120px] rounded-full", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212] mt-2", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, profile.username), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-[#666666]", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, profile.level)))), selectedProfile && /*#__PURE__*/ React.createElement("form", { onSubmit: handleAccessAccount, className: "flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "pin", className: "font-roboto block text-[#121212]", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, "Enter your PIN"), /*#__PURE__*/ React.createElement("input", { id: "pin", name: "pin", type: "password", value: pin, onChange: handlePinChange, className: "mt-1 p-2 w-full border rounded-md", maxLength: "4", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "font-roboto bg-[#4caf50] text-white px-4 py-2 rounded-md hover:bg-[#45a045]", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "Access Account"))); }