Spaces:
Running
Running
| /** | |
| * Get the user's current location using the browser's geolocation API. | |
| * @returns {Promise<{ latitude: number, longitude: number }>} The current position { latitude, longitude }. | |
| */ | |
| export async function get_location() { | |
| return new Promise((resolve, reject) => { | |
| if (!navigator.geolocation) { | |
| reject("Geolocation not supported."); | |
| return; | |
| } | |
| navigator.geolocation.getCurrentPosition( | |
| (pos) => | |
| resolve({ | |
| latitude: pos.coords.latitude, | |
| longitude: pos.coords.longitude, | |
| }), | |
| (err) => reject(err.message || "Geolocation error"), | |
| ); | |
| }); | |
| } | |
| export default (input, output) => | |
| React.createElement( | |
| "div", | |
| { className: "bg-green-50 border border-green-200 rounded-lg p-4" }, | |
| React.createElement( | |
| "div", | |
| { className: "flex items-center mb-2" }, | |
| React.createElement( | |
| "div", | |
| { | |
| className: | |
| "w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3", | |
| }, | |
| "π", | |
| ), | |
| React.createElement( | |
| "h3", | |
| { className: "text-green-900 font-semibold" }, | |
| "Location", | |
| ), | |
| ), | |
| output?.latitude && output?.longitude | |
| ? React.createElement( | |
| "div", | |
| { className: "space-y-1 text-sm" }, | |
| React.createElement( | |
| "p", | |
| { className: "text-green-700" }, | |
| React.createElement( | |
| "span", | |
| { className: "font-medium" }, | |
| "Latitude: ", | |
| ), | |
| output.latitude.toFixed(6), | |
| ), | |
| React.createElement( | |
| "p", | |
| { className: "text-green-700" }, | |
| React.createElement( | |
| "span", | |
| { className: "font-medium" }, | |
| "Longitude: ", | |
| ), | |
| output.longitude.toFixed(6), | |
| ), | |
| React.createElement( | |
| "a", | |
| { | |
| href: `https://maps.google.com?q=${output.latitude},${output.longitude}`, | |
| target: "_blank", | |
| rel: "noopener noreferrer", | |
| className: | |
| "inline-block mt-2 text-green-600 hover:text-green-800 underline text-xs", | |
| }, | |
| "View on Google Maps", | |
| ), | |
| ) | |
| : React.createElement( | |
| "p", | |
| { className: "text-green-700 text-sm" }, | |
| JSON.stringify(output), | |
| ), | |
| ); | |