import { useState } from 'react';
const GeoLink = () => {
const [trackingId, setTrackingId] = useState<string | null>(null);
const [locationData, setLocationData] = useState<{
latitude: number;
longitude: number;
accuracy: number;
timestamp: number;
} | null>(null);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
// Generate a unique tracking ID
const generateTrackingLink = () => {
const id = [Link]().toString(36).substring(2, 10);
setTrackingId(id);
setLocationData(null);
setError(null);
};
// Request user's location
const requestLocation = () => {
setIsLoading(true);
setError(null);
if (![Link]) {
setError("Geolocation is not supported by this browser.");
setIsLoading(false);
return;
}
[Link](
(position) => {
setLocationData({
latitude: [Link],
longitude: [Link],
accuracy: [Link],
timestamp: [Link],
});
setIsLoading(false);
},
(error) => {
let errorMessage = "Unknown error occurred";
switch ([Link]) {
case error.PERMISSION_DENIED:
errorMessage = "User denied the request for geolocation.";
break;
case error.POSITION_UNAVAILABLE:
errorMessage = "Location information is unavailable.";
break;
case [Link]:
errorMessage = "The request to get location timed out.";
break;
}
setError(errorMessage);
setIsLoading(false);
},
{ enableHighAccuracy: true, timeout: 10000, maximumAge: 60000 }
);
};
// Generate the shareable link
const trackingLink = trackingId
? `${[Link]}${[Link]}#track/${trackingId}`
: '';
// Check if we're on a tracking page
const isTrackingPage = [Link]('#track/');
// Render either the generator page or tracking page
if (isTrackingPage) {
return (
<div className="min-h-screen bg-background flex items-center justify-center
p-4">
<div className="max-w-md w-full bg-card rounded-lg shadow-lg p-6">
<h1 className="text-2xl font-bold text-foreground mb-6 text-
center">Location Tracker</h1>
{!locationData ? (
<div className="text-center">
<p className="text-muted-foreground mb-4">
This link will request your location to share it with the sender.
</p>
<button
onClick={requestLocation}
disabled={isLoading}
className="w-full bg-primary text-primary-foreground py-2 px-4
rounded-md hover:bg-primary/90 transition-colors disabled:opacity-50"
>
{isLoading ? "Requesting location..." : "Share My Location"}
</button>
{error && (
<div className="mt-4 p-3 bg-destructive/20 text-destructive
rounded-md">
{error}
</div>
)}
</div>
) : (
<div className="text-center">
<div className="mb-4 p-3 bg-muted rounded-md">
<h2 className="font-semibold text-foreground mb-2">Location Shared
Successfully!</h2>
<p className="text-sm text-muted-foreground">
Lat: {[Link](6)}
<br />
Long: {[Link](6)}
<br />
Accuracy: ±{[Link]([Link])} meters
</p>
</div>
<div className="bg-muted rounded-lg overflow-hidden h-48 mb-4 flex
items-center justify-center">
<div className="text-center p-4">
<img
src="[Link]
%20display%20showing%20location%20pin%20on%20a%20geographic%20map&id=b7218560-28f7-
452e-8d6d-bf0a51825e20"
alt="Map visualization showing the recorded location with a pin
marker"
className="rounded-md mx-auto"
/>
<p className="text-xs text-muted-foreground mt-2">Map
visualization (simulated)</p>
</div>
</div>
<p className="text-sm text-muted-foreground">
The sender has been notified of your location.
</p>
</div>
)}
</div>
</div>
);
}
// Main page (link generator)
return (
<div className="min-h-screen bg-background flex items-center justify-center p-
4">
<div className="max-w-md w-full bg-card rounded-lg shadow-lg p-6">
<h1 className="text-2xl font-bold text-foreground mb-2 text-
center">GeoLink</h1>
<p className="text-muted-foreground mb-6 text-center">
Generate a link to track someone's location
</p>
<div className="space-y-4">
{!trackingId ? (
<button
onClick={generateTrackingLink}
className="w-full bg-primary text-primary-foreground py-2 px-4
rounded-md hover:bg-primary/90 transition-colors"
>
Generate Tracking Link
</button>
) : (
<div className="space-y-4">
<div className="p-3 bg-muted rounded-md">
<p className="text-sm text-muted-foreground mb-1">Share this
link:</p>
<div className="flex items-center">
<input
type="text"
readOnly
value={trackingLink}
className="flex-1 bg-background border border-border rounded-l-
md py-1 px-2 text-foreground text-sm"
/>
<button
onClick={() => [Link](trackingLink)}
className="bg-secondary text-secondary-foreground py-1 px-3
rounded-r-md hover:bg-secondary/80 transition-colors text-sm"
>
Copy
</button>
</div>
</div>
<div className="bg-muted rounded-lg overflow-hidden h-48 flex items-
center justify-center">
<div className="text-center p-4">
<img
src="[Link]
%20for%20location%20data%20with%20a%20loading%20animation&id=b7218560-28f7-452e-
8d6d-bf0a51825e20"
alt="Waiting for location tracking data to be received"
className="rounded-md mx-auto"
/>
<p className="text-sm text-muted-foreground mt-2">Waiting for
location data...</p>
</div>
</div>
<button
onClick={() => setTrackingId(null)}
className="w-full bg-secondary text-secondary-foreground py-2 px-4
rounded-md hover:bg-secondary/80 transition-colors"
>
Generate New Link
</button>
</div>
)}
</div>
<div className="mt-6 pt-4 border-t border-border">
<h2 className="text-lg font-semibold text-foreground mb-2">How it
works:</h2>
<ol className="text-sm text-muted-foreground space-y-2 list-decimal list-
inside">
<li>Generate a unique tracking link</li>
<li>Share the link with someone via message or email</li>
<li>When they click the link, they'll be asked to share their
location</li>
<li>Their location will be displayed on a map (this demo simulates
this)</li>
</ol>
<div className="mt-4 p-3 bg-muted/50 rounded-md">
<p className="text-xs text-muted-foreground">
Note: This is a demonstration. In a production application, location
data would be securely stored and transmitted to a server.
</p>
</div>
</div>
</div>
</div>
);
};
export default GeoLink;
