function MainComponent() { const [isLoggedIn, setIsLoggedIn] = React.useState(false); const [currentPage, setCurrentPage] = React.useState('accountCreation'); const [contacts, setContacts] = React.useState(null); const [selectedGroup, setSelectedGroup] = React.useState(null); const [groupName, setGroupName] = React.useState(''); const [tripPreferences, setTripPreferences] = React.useState([]); React.useEffect(()=>{ const loggedIn = localStorage.getItem('isLoggedIn'); if (loggedIn) { setIsLoggedIn(true); setCurrentPage('groupsPage'); } }, []); const handleLogin = async ()=>{ localStorage.setItem('isLoggedIn', true); setIsLoggedIn(true); setCurrentPage('groupsPage'); }; const handleCreateGroup = ()=>{ setCurrentPage('inviteFriends'); }; const handleImportContacts = async ()=>{ // Simulated API call to import contacts setContacts([ 'Alice', 'Bob', 'Charlie' ]); }; const handleSelectInvite = (contact)=>{ // Send invite to contact }; const handleSubmitGroupName = ()=>{ setCurrentPage('preferences'); }; const updatePreferences = (preference)=>{ setTripPreferences((prevPrefs)=>{ return prevPrefs.includes(preference) ? prevPrefs.filter((pref)=>pref !== preference) : [ ...prevPrefs, preference ]; }); }; let content; switch(currentPage){ case 'groupsPage': content = /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }); break; case 'inviteFriends': content = /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleImportContacts, __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "Import Contacts"), /*#__PURE__*/ React.createElement(React.Fragment, null, contacts && contacts.map((contact, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>handleSelectInvite(contact), __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this }, "Invite ", contact))), /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Enter phone number", name: "phoneNumber", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, "Invite")); break; case 'nameGroup': content = /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Group Name", name: "groupName", value: groupName, onChange: (e)=>setGroupName(e.target.value), __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSubmitGroupName, __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, "Next")); break; case 'preferences': content = /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }); break; case 'accountCreation': default: content = /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/logo.png", alt: "Simple company logo", className: "w-32 h-32", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "font-semibold text-xl", __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }, "Welcome to TripMatch"), /*#__PURE__*/ React.createElement("button", { onClick: handleLogin, __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, "Create Account / Login")); } return /*#__PURE__*/ React.createElement("div", { className: `page-container ${currentPage}`, __source: { fileName: "", lineNumber: 116, columnNumber: 5 }, __self: this }, content); }