function MainComponent() { const [profiles, setProfiles] = React.useState([]); const [matchedProfiles, setMatchedProfiles] = React.useState([]); const [selectedChat, setSelectedChat] = React.useState(null); const [settingsOpen, setSettingsOpen] = React.useState(false); const [ageRange, setAgeRange] = React.useState([ 18, 50 ]); const [distance, setDistance] = React.useState(10); const [interests, setInterests] = React.useState([]); const handleSwipe = async (direction, profile)=>{ if (direction === 'right') { setMatchedProfiles([ ...matchedProfiles, profile ]); } // Remove swiped profile and load next one setProfiles(profiles.slice(1)); // Fetch new profile from API const response = await fetch('/integrations/anthropic-claude/', { method: 'POST', body: JSON.stringify({ messages: [ { role: 'user', content: 'Generate a new user profile for a dating app, including name, age, and photo URL.' } ] }) }); const data = await response.json(); const newProfile = data.choices[0].message.content; setProfiles([ ...profiles, newProfile ]); }; const handleChatSelect = (profile)=>{ setSelectedChat(profile); }; const handleSettingsToggle = ()=>{ setSettingsOpen(!settingsOpen); }; const handleInterestSelect = (interest)=>{ if (interests.includes(interest)) { setInterests(interests.filter((i)=>i !== interest)); } else { setInterests([ ...interests, interest ]); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white font-roboto", __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-center items-center px-4 h-[50px] border-b border-[#E0E0E0] bg-white", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleSettingsToggle, className: "text-[#576574] absolute left-4", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cog text-[25px]", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("img", { src: "logo.png", alt: "App Logo", className: "w-[100px] h-[30px]", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "text-[#2ED573] absolute right-4", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-comment-dots text-[25px]", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("main", { className: "p-4", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, profiles.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "relative w-[300px] h-[400px] mx-auto mb-8", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: profiles[0].photo, alt: `${profiles[0].name}'s profile`, className: "w-full h-full object-cover rounded-lg", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black to-transparent text-white", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[20px] font-bold", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, profiles[0].name), /*#__PURE__*/ React.createElement("p", { className: "text-[18px]", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, profiles[0].age)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleSwipe('left', profiles[0]), className: "absolute bottom-4 left-4 bg-[#576574] text-white rounded-full p-2", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times text-[30px]", __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleSwipe('right', profiles[0]), className: "absolute bottom-4 right-4 bg-[#FF4757] text-white rounded-full p-2", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-heart text-[30px]", __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }))), selectedChat ? /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1/3 border-r border-[#E0E0E0]", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, matchedProfiles.map((profile)=>/*#__PURE__*/ React.createElement("button", { key: profile.id, onClick: ()=>handleChatSelect(profile), className: "flex items-center p-2 border-b border-[#E0E0E0] w-full", __source: { fileName: "", lineNumber: 94, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: profile.photo, alt: `${profile.name}'s profile`, className: "w-[40px] h-[40px] rounded-full mr-2", __source: { fileName: "", lineNumber: 99, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 104, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[16px] font-bold", __source: { fileName: "", lineNumber: 105, columnNumber: 21 }, __self: this }, profile.name), /*#__PURE__*/ React.createElement("p", { className: "text-[14px] text-[#576574]", __source: { fileName: "", lineNumber: 106, columnNumber: 21 }, __self: this }, "Last message preview..."))))), /*#__PURE__*/ React.createElement("div", { className: "w-2/3 p-4", __source: { fileName: "", lineNumber: 111, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2", __source: { fileName: "", lineNumber: 112, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "self-start bg-[#DCF8C6] p-2 rounded-lg", __source: { fileName: "", lineNumber: 113, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 114, columnNumber: 19 }, __self: this }, "Hi there!")), /*#__PURE__*/ React.createElement("div", { className: "self-end bg-white p-2 rounded-lg", __source: { fileName: "", lineNumber: 116, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 117, columnNumber: 19 }, __self: this }, "Hello! How are you?"))), /*#__PURE__*/ React.createElement("form", { className: "flex mt-4", __source: { fileName: "", lineNumber: 120, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Type a message...", className: "flex-grow border border-[#E0E0E0] rounded-l-lg p-2", __source: { fileName: "", lineNumber: 121, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#2ED573] text-white px-4 rounded-r-lg", __source: { fileName: "", lineNumber: 126, columnNumber: 17 }, __self: this }, "Send")))) : /*#__PURE__*/ React.createElement("div", { className: "text-center text-[#576574]", __source: { fileName: "", lineNumber: 133, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 134, columnNumber: 13 }, __self: this }, "No matches yet. Keep swiping!"))), settingsOpen && /*#__PURE__*/ React.createElement("div", { className: "fixed top-0 left-0 right-0 bottom-0 bg-white p-4", __source: { fileName: "", lineNumber: 140, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[24px] font-bold mb-4", __source: { fileName: "", lineNumber: 141, columnNumber: 11 }, __self: this }, "Settings"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 142, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 143, columnNumber: 13 }, __self: this }, "Age Range: ", ageRange[0], " - ", ageRange[1]), /*#__PURE__*/ React.createElement("input", { type: "range", min: "18", max: "100", value: ageRange[0], onChange: (e)=>setAgeRange([ e.target.value, ageRange[1] ]), className: "w-full", __source: { fileName: "", lineNumber: 144, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "range", min: "18", max: "100", value: ageRange[1], onChange: (e)=>setAgeRange([ ageRange[0], e.target.value ]), className: "w-full", __source: { fileName: "", lineNumber: 152, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 161, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 162, columnNumber: 13 }, __self: this }, "Distance: ", distance, " miles"), /*#__PURE__*/ React.createElement("input", { type: "range", min: "1", max: "100", value: distance, onChange: (e)=>setDistance(e.target.value), className: "w-full", __source: { fileName: "", lineNumber: 163, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 172, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 173, columnNumber: 13 }, __self: this }, "Interests:"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap", __source: { fileName: "", lineNumber: 174, columnNumber: 13 }, __self: this }, [ 'Travel', 'Food', 'Music', 'Sports', 'Movies' ].map((interest)=>/*#__PURE__*/ React.createElement("button", { key: interest, onClick: ()=>handleInterestSelect(interest), className: `px-4 py-2 rounded-[20px] mr-2 mb-2 ${interests.includes(interest) ? 'bg-[#2ED573] text-white' : 'bg-[#E0E0E0] text-[#333]'}`, __source: { fileName: "", lineNumber: 176, columnNumber: 17 }, __self: this }, interest))))), /*#__PURE__*/ React.createElement("footer", { className: "fixed bottom-0 left-0 right-0 bg-white h-[50px] border-t border-[#E0E0E0] flex justify-evenly items-center", __source: { fileName: "", lineNumber: 193, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { __source: { fileName: "", lineNumber: 194, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user text-[24px] text-[#576574]", __source: { fileName: "", lineNumber: 195, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-[#2ED573]", __source: { fileName: "", lineNumber: 197, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-heart text-[24px]", __source: { fileName: "", lineNumber: 198, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleSettingsToggle, __source: { fileName: "", lineNumber: 200, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cog text-[24px] text-[#576574]", __source: { fileName: "", lineNumber: 201, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 205, columnNumber: 7 }, __self: this }, ` @keyframes swipeLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } @keyframes swipeRight { 0% { transform: translateX(0); } 100% { transform: translateX(100%); } } .swipe-left { animation: swipeLeft 0.5s forwards; } .swipe-right { animation: swipeRight 0.5s forwards; } `)); }