function MainComponent() { const [radius, setRadius] = React.useState(''); const [location, setLocation] = React.useState({ latitude: null, longitude: null }); React.useEffect(()=>{ if (navigator.geolocation) { navigator.geolocation.getCurrentPosition((position)=>{ setLocation({ latitude: position.coords.latitude, longitude: position.coords.longitude }); }, (error)=>{ console.error("Error getting location: ", error); }); } }, []); const handleRadiusChange = (e)=>{ setRadius(e.target.value); }; const handleSearch = ()=>{ if (!radius || !location.latitude || !location.longitude) return; alert(`Searching within ${radius} feet from lat: ${location.latitude}, long: ${location.longitude}`); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center h-screen bg-[#f3f4f6] p-4", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center my-6", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-2", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "Anonymous Hookup Map"), /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, "Find someone nearby to connect with anonymously")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center w-full flex-grow", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-[400px] bg-[#cbd5e1] mb-4", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "Map Placeholder"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[400px] p-4 bg-white rounded-md shadow-md", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "my-2", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium mb-1", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "Radius (in feet)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "radius", className: "w-full p-2 border rounded-md", placeholder: "Enter radius in feet", value: radius, onChange: handleRadiusChange, __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "w-full py-2 mt-2 bg-[#3b82f6] text-white font-bold rounded-md", onClick: handleSearch, __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "Search"))), /*#__PURE__*/ React.createElement("div", { className: "w-full flex justify-evenly items-center mt-4", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-[#ef4444] text-3xl", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-heart", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-[#10b981] text-3xl", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-comment", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this })))); }