function MainComponent() { const [userLocation, setUserLocation] = React.useState(null); const [interest, setInterest] = React.useState(""); const [searching, setSearching] = React.useState(false); const [matches, setMatches] = React.useState([]); React.useEffect(()=>{ async function fetchLocation() { try { const userLocationRes = await fetch("https://ipapi.co/json/"); const userLocationData = await userLocationRes.json(); setUserLocation({ latitude: userLocationData.latitude, longitude: userLocationData.longitude }); } catch (error) { console.error("Error fetching user location:", error); } } fetchLocation(); }, []); const handleSearchPeople = ()=>{ setSearching(true); // Dummy matches data setMatches([ { name: "John Doe", interest: "Basketball" }, { name: "Jane Smith", interest: "Programming" } ]); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold font-roboto text-[#333]", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "Meet People"), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-roboto text-[#666]", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "Find people with similar interests around you.")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row sm:space-x-6", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-lg w-[300px] m-2", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-roboto text-[#222]", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "Your Location"), /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-[#666]", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, userLocation ? /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, `Latitude: ${userLocation.latitude}, Longitude: ${userLocation.longitude}`) : /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, "Loading your location..."))), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-lg w-[300px] m-2", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-roboto text-[#222]", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "Find People"), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "interest", type: "text", value: interest, onChange: (e)=>setInterest(e.target.value), className: "w-full p-2 border border-[#ccc] rounded-lg mb-4", placeholder: "Enter your interest", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSearchPeople, className: "w-full bg-[#4CAF50] text-white p-2 rounded-lg font-bold font-roboto", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, "Search"), searching && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-[#666]", __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }, "People with similar interests:"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc list-inside", __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this }, matches.map((match, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 72, columnNumber: 21 }, __self: this }, `${match.name} - Interest: ${match.interest}`)))))))); }