function MainComponent() { const [searchTerm, setSearchTerm] = React.useState(''); const [gyms, setGyms] = React.useState([]); const [users, setUsers] = React.useState([]); const [profile, setProfile] = React.useState({ name: '', fitnessGoal: '', bodyGoal: '', image: '' }); const [loading, setLoading] = React.useState(false); const [currentPage, setCurrentPage] = React.useState('search'); const handleSearchChange = (e)=>{ setSearchTerm(e.target.value); }; const fetchGyms = async ()=>{ setLoading(true); const response = await fetch(`/integrations/google-place-autocomplete/autocomplete/json?input=${searchTerm}&radius=50000`, { method: 'GET' }); const data = await response.json(); if (data && data.predictions) { const locations = data.predictions.map((prediction)=>prediction.description); const gymsData = await Promise.all(locations.map(async (location)=>{ const response = await fetch(`/integrations/local-business-data/search?query=Gyms+in+${location}&language=en®ion=us&subtypes=Gym&fields=name,opening_hours,price`, { method: 'GET' }); return response.json(); })); setGyms(gymsData.flatMap((gymData)=>gymData.data)); setLoading(false); } }; const handleProfileChange = (e)=>{ const { name, value } = e.target; setProfile((prevProfile)=>({ ...prevProfile, [name]: value })); }; const handleFileChange = (event)=>{ const file = event.target.files[0]; const reader = new FileReader(); reader.onloadend = ()=>{ setProfile((prevProfile)=>({ ...prevProfile, image: reader.result })); }; reader.readAsDataURL(file); }; const handleFormSubmit = async (e)=>{ e.preventDefault(); const newUserList = [ ...users, profile ]; setUsers(newUserList); alert('Profile Created Successfully!'); }; React.useEffect(()=>{ const fetchUsers = async ()=>{ const response = await fetch('/integrations/stable-diffusion/?prompt=fitness+enthusiast&batch_size=1', { method: 'GET' }); const data = await response.json(); if (data && data.data) { const generatedUsers = data.data.map((image, index)=>({ name: `User ${index + 1}`, fitnessGoal: 'Stay Fit', bodyGoal: 'Muscle Toning', image: image })); setUsers(generatedUsers); } }; fetchUsers(); }, []); const renderSearch = ()=>/*#__PURE__*/ React.createElement("section", { className: "mt-10", __source: { fileName: "", lineNumber: 73, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mx-auto max-w-xl", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "search-gyms", className: "block text-sm font-semibold font-roboto text-[#444] mb-2", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, "Search for Gyms Near You"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", value: searchTerm, onChange: handleSearchChange, id: "search-gyms", placeholder: "Enter your location", className: "w-full p-4 border-2 border-gray-300 rounded-lg font-roboto", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: fetchGyms, className: "mt-4 bg-[#007BFF] text-white rounded-lg p-2 w-full font-roboto animate-pulse", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, loading ? 'Searching...' : 'Search'))), /*#__PURE__*/ React.createElement("div", { className: "mx-auto max-w-xl grid gap-6", __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }, gyms.map((gym, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white rounded-lg shadow p-4", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto font-semibold text-lg", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, gym.name), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, gym.opening_hours ? `Opening Hours: ${gym.opening_hours}` : 'Opening Hours: Not available'), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, gym.price ? `Price: ${gym.price}` : 'Price: Not available'))))); const renderUsers = ()=>/*#__PURE__*/ React.createElement("section", { className: "mt-10", __source: { fileName: "", lineNumber: 94, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mx-auto max-w-xl grid gap-6", __source: { fileName: "", lineNumber: 95, columnNumber: 7 }, __self: this }, users.map((user, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white rounded-lg shadow p-4", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: user.image, alt: `Profile of ${user.name}`, className: "w-32 h-32 object-cover rounded-full mx-auto", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "font-roboto font-semibold text-center", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, user.name), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-center", __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }, "Fitness Goal: ", user.fitnessGoal), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-center", __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this }, "Body Goal: ", user.bodyGoal))))); const renderProfile = ()=>/*#__PURE__*/ React.createElement("section", { className: "mt-10", __source: { fileName: "", lineNumber: 109, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mx-auto max-w-xl", __source: { fileName: "", lineNumber: 110, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold font-roboto text-[#222] mb-4", __source: { fileName: "", lineNumber: 111, columnNumber: 9 }, __self: this }, "Create Your Profile"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleFormSubmit, __source: { fileName: "", lineNumber: 112, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "name", className: "block text-sm font-semibold font-roboto text-[#444] mb-2", __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", id: "name", value: profile.name, onChange: handleProfileChange, placeholder: "Your Name", className: "w-full p-4 border-2 border-gray-300 rounded-lg font-roboto", __source: { fileName: "", lineNumber: 115, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "fitness-goal", className: "block text-sm font-semibold font-roboto text-[#444] mb-2", __source: { fileName: "", lineNumber: 118, columnNumber: 13 }, __self: this }, "Fitness Goal"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "fitnessGoal", id: "fitness-goal", value: profile.fitnessGoal, onChange: handleProfileChange, placeholder: "e.g. Lose weight, Build muscle", className: "w-full p-4 border-2 border-gray-300 rounded-lg font-roboto", __source: { fileName: "", lineNumber: 119, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 121, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "body-goal", className: "block text-sm font-semibold font-roboto text-[#444] mb-2", __source: { fileName: "", lineNumber: 122, columnNumber: 13 }, __self: this }, "Body Goal"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "bodyGoal", id: "body-goal", value: profile.bodyGoal, onChange: handleProfileChange, placeholder: "e.g. Toned, Bulking", className: "w-full p-4 border-2 border-gray-300 rounded-lg font-roboto", __source: { fileName: "", lineNumber: 123, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 125, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "image", className: "block text-sm font-semibold font-roboto text-[#444] mb-2", __source: { fileName: "", lineNumber: 126, columnNumber: 13 }, __self: this }, "Upload Your Picture"), /*#__PURE__*/ React.createElement("input", { type: "file", name: "image", id: "image", onChange: handleFileChange, className: "w-full p-2 border-2 border-gray-300 rounded-lg font-roboto text-[#444]", __source: { fileName: "", lineNumber: 127, columnNumber: 13 }, __self: this }), profile.image && /*#__PURE__*/ React.createElement("img", { src: profile.image, alt: `Profile of ${profile.name}`, className: "mt-2 w-32 h-32 object-cover rounded-full mx-auto", __source: { fileName: "", lineNumber: 128, columnNumber: 31 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#007BFF] text-white rounded-lg p-4 w-full font-roboto", __source: { fileName: "", lineNumber: 130, columnNumber: 11 }, __self: this }, "Create Profile")))); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#F3F4F6] p-4", __source: { fileName: "", lineNumber: 137, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "text-center p-5", __source: { fileName: "", lineNumber: 138, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold font-roboto text-[#222] animate-bounce", __source: { fileName: "", lineNumber: 139, columnNumber: 9 }, __self: this }, "GYM Buddy"), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-light font-roboto text-[#666]", __source: { fileName: "", lineNumber: 140, columnNumber: 9 }, __self: this }, "Find your ideal gym and connect with partners."), /*#__PURE__*/ React.createElement("nav", { className: "flex justify-center gap-4 mt-4", __source: { fileName: "", lineNumber: 141, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentPage('search'), className: "bg-[#007BFF] text-white rounded-lg p-2 font-roboto", __source: { fileName: "", lineNumber: 142, columnNumber: 11 }, __self: this }, "Search Gyms"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentPage('users'), className: "bg-[#007BFF] text-white rounded-lg p-2 font-roboto", __source: { fileName: "", lineNumber: 143, columnNumber: 11 }, __self: this }, "Find Gym Buddies"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentPage('profile'), className: "bg-[#007BFF] text-white rounded-lg p-2 font-roboto", __source: { fileName: "", lineNumber: 144, columnNumber: 11 }, __self: this }, "Your Profile"))), currentPage === 'search' && renderSearch(), currentPage === 'users' && renderUsers(), currentPage === 'profile' && renderProfile()); }