100 lines
3.0 KiB
TypeScript
100 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { getLocationFromIP } from '@/app/utils/ipLocation';
|
|
|
|
interface LocationData {
|
|
ip: string;
|
|
country_name: string;
|
|
country_code: string;
|
|
city: string;
|
|
region: string;
|
|
continent_code: string;
|
|
continent_name: string;
|
|
latitude: number;
|
|
longitude: number;
|
|
}
|
|
|
|
export default function IpLocationTest() {
|
|
const [locationData, setLocationData] = useState<LocationData | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const testIp = "120.244.39.90";
|
|
|
|
useEffect(() => {
|
|
async function fetchLocation() {
|
|
try {
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
const data = await getLocationFromIP(testIp);
|
|
setLocationData(data);
|
|
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Unknown error occurred');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
fetchLocation();
|
|
}, []);
|
|
|
|
return (
|
|
<div className="p-4 bg-white rounded-lg shadow">
|
|
<h2 className="text-lg font-semibold mb-4">IP Location Test: {testIp}</h2>
|
|
|
|
{loading && (
|
|
<div className="flex items-center text-gray-500">
|
|
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-500 mr-2"></div>
|
|
Loading location data...
|
|
</div>
|
|
)}
|
|
|
|
{error && (
|
|
<div className="text-red-500">
|
|
Error: {error}
|
|
</div>
|
|
)}
|
|
|
|
{!loading && locationData && (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<h3 className="font-medium">Location Data:</h3>
|
|
<pre className="mt-2 p-4 bg-gray-100 rounded overflow-auto">
|
|
{JSON.stringify(locationData, null, 2)}
|
|
</pre>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="border p-3 rounded">
|
|
<h4 className="font-medium">Country</h4>
|
|
<div>{locationData.country_name} ({locationData.country_code})</div>
|
|
</div>
|
|
|
|
<div className="border p-3 rounded">
|
|
<h4 className="font-medium">City</h4>
|
|
<div>{locationData.city || 'N/A'}</div>
|
|
</div>
|
|
|
|
<div className="border p-3 rounded">
|
|
<h4 className="font-medium">Region</h4>
|
|
<div>{locationData.region || 'N/A'}</div>
|
|
</div>
|
|
|
|
<div className="border p-3 rounded">
|
|
<h4 className="font-medium">Continent</h4>
|
|
<div>{locationData.continent_name} ({locationData.continent_code})</div>
|
|
</div>
|
|
|
|
<div className="border p-3 rounded col-span-2">
|
|
<h4 className="font-medium">Coordinates</h4>
|
|
<div>Latitude: {locationData.latitude}, Longitude: {locationData.longitude}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|