function MainComponent() { const [page, setPage] = React.useState('home'); const [photo, setPhoto] = React.useState(null); const [bio, setBio] = React.useState(''); const [wants, setWants] = React.useState(''); const [height, setHeight] = React.useState(''); const [location, setLocation] = React.useState(''); const [viewPage, setViewPage] = React.useState(0); const [showLikePopUp, setShowLikePopUp] = React.useState(false); const [profiles, setProfiles] = React.useState([ { photo: "path/to/samplePhoto1.jpg", bio: "I love long walks and a good laugh.", wants: "Looking for someone to join me on adventures.", height: "172", location: "New York" }, { photo: "path/to/samplePhoto2.jpg", bio: "A foodie trying to explore every cuisine.", wants: "Seeking a partner in culinary exploration.", height: "165", location: "San Francisco" } ]); const [showMessageInput, setShowMessageInput] = React.useState(false); const [message, setMessage] = React.useState(''); const uploadPhoto = (event)=>{ const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = (e)=>{ setPhoto(e.target.result); }; reader.readAsDataURL(file); } }; const saveProfile = ()=>{ setProfiles([ ...profiles, { photo, bio, wants, height, location } ]); setPage('home'); }; const nextPage = ()=>{ setShowMessageInput(false); setShowLikePopUp(false); setViewPage((prevPage)=>(prevPage + 1) % profiles.length); }; const isProfileComplete = photo && bio && wants && height && location; const sendMessage = ()=>{ console.log(`Message sent: ${message}`); setMessage(''); setShowMessageInput(false); }; const likeProfile = ()=>{ setShowLikePopUp(true); setTimeout(()=>{ setShowLikePopUp(false); }, 1000); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen bg-[#000000] flex flex-col items-center justify-center font-roboto relative", __source: { fileName: "", lineNumber: 67, columnNumber: 5 }, __self: this }, page === 'home' && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "text-white text-4xl mb-4", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, "No Strings Attached"), /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-mars text-white text-5xl mx-2", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-venus text-white text-5xl mx-2", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "mt-4 bg-white text-black py-2 px-4 rounded", onClick: ()=>setPage('profile'), __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, "Create Profile"), isProfileComplete && /*#__PURE__*/ React.createElement("button", { className: "mt-4 bg-white text-black py-2 px-4 rounded", onClick: ()=>setPage('view'), __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, "View Users")), page === 'profile' && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "text-white text-lg mb-4", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, "Profile Setup"), photo && /*#__PURE__*/ React.createElement("img", { src: photo, alt: "Profile photo", className: "w-[200px] h-[200px] rounded-full mb-4", __source: { fileName: "", lineNumber: 88, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", onChange: uploadPhoto, className: "mb-4", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { className: "bg-white text-black w-full max-w-md h-[100px] p-2 mb-4", placeholder: "Your bio", name: "bio", value: bio, onChange: (e)=>setBio(e.target.value), __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { className: "bg-white text-black w-full max-w-md h-[100px] p-2 mb-4", placeholder: "What you are looking for", name: "wants", value: wants, onChange: (e)=>setWants(e.target.value), __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "bg-white text-black w-full max-w-md p-2 mb-4", placeholder: "Height in cm", name: "height", type: "number", value: height, onChange: (e)=>setHeight(e.target.value), __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "bg-white text-black w-full max-w-md p-2 mb-4", placeholder: "Your location", name: "location", value: location, onChange: (e)=>setLocation(e.target.value), __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-white text-black py-2 px-4 rounded", onClick: saveProfile, __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }, "Save Profile")), page === 'view' && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("button", { className: "absolute top-4 left-4 bg-white text-black py-2 px-4 rounded", onClick: ()=>setPage('home'), __source: { fileName: "", lineNumber: 126, columnNumber: 11 }, __self: this }, "Back"), /*#__PURE__*/ React.createElement("div", { className: "text-white text-lg mb-4", __source: { fileName: "", lineNumber: 129, columnNumber: 11 }, __self: this }, "Profile"), profiles[viewPage] && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("img", { src: profiles[viewPage].photo, alt: "Other user's profile", className: "w-[200px] h-[200px] rounded-full mb-4", __source: { fileName: "", lineNumber: 132, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-white mb-4", __source: { fileName: "", lineNumber: 133, columnNumber: 15 }, __self: this }, "Bio: ", profiles[viewPage].bio), /*#__PURE__*/ React.createElement("div", { className: "text-white mb-4", __source: { fileName: "", lineNumber: 134, columnNumber: 15 }, __self: this }, "Looking for: ", profiles[viewPage].wants), /*#__PURE__*/ React.createElement("div", { className: "text-white mb-4", __source: { fileName: "", lineNumber: 135, columnNumber: 15 }, __self: this }, "Height: ", profiles[viewPage].height, " cm"), /*#__PURE__*/ React.createElement("div", { className: "text-white mb-4", __source: { fileName: "", lineNumber: 136, columnNumber: 15 }, __self: this }, "Location: ", profiles[viewPage].location), /*#__PURE__*/ React.createElement("div", { className: "flex justify-around w-full max-w-md", __source: { fileName: "", lineNumber: 137, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-black py-2 px-4 rounded", onClick: likeProfile, __source: { fileName: "", lineNumber: 138, columnNumber: 17 }, __self: this }, "💚 Like"), showMessageInput ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("input", { className: "bg-white text-black p-2", placeholder: "Type your message", value: message, onChange: (e)=>setMessage(e.target.value), __source: { fileName: "", lineNumber: 141, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-black py-2 px-4 rounded", onClick: sendMessage, __source: { fileName: "", lineNumber: 147, columnNumber: 21 }, __self: this }, "Send")) : /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-black py-2 px-4 rounded", onClick: ()=>setShowMessageInput(true), __source: { fileName: "", lineNumber: 152, columnNumber: 19 }, __self: this }, "✉️ Message"), /*#__PURE__*/ React.createElement("button", { className: "bg-red-500 text-black py-2 px-4 rounded", onClick: nextPage, __source: { fileName: "", lineNumber: 156, columnNumber: 17 }, __self: this }, "⏭ Skip")), showLikePopUp && /*#__PURE__*/ React.createElement("div", { className: "absolute text-4xl animate-pulse", __source: { fileName: "", lineNumber: 158, columnNumber: 33 }, __self: this }, "❤️"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 163, columnNumber: 7 }, __self: this }, ` @keyframes pulse { 0% { transform: scale(0.95); opacity: 1; } 70% { transform: scale(1); opacity: 0; } 100% { transform: scale(0.95); opacity: 0; } } .animate-pulse { animation: pulse 1s cubic-bezier(0.4, 0, 0.6, 1) forwards; } `)); }