Fixed weather location
This commit is contained in:
@@ -3,22 +3,35 @@
|
|||||||
import { CloudRain, Sun, Cloud, Thermometer } from 'lucide-react';
|
import { CloudRain, Sun, Cloud, Thermometer } from 'lucide-react';
|
||||||
import { useState, useEffect } from 'react';
|
import { useState, useEffect } from 'react';
|
||||||
|
|
||||||
// Default to New York, user can change this
|
|
||||||
const LAT = 40.7128;
|
|
||||||
const LNG = -74.0060;
|
|
||||||
|
|
||||||
export function WeatherCard() {
|
export function WeatherCard() {
|
||||||
const [weather, setWeather] = useState<any>(null);
|
const [weather, setWeather] = useState<any>(null);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [locationName, setLocationName] = useState('Detecting Location...');
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
async function fetchWeather() {
|
async function fetchWeather(lat: number, lng: number) {
|
||||||
try {
|
try {
|
||||||
|
// Fetch Weather
|
||||||
const res = await fetch(
|
const res = await fetch(
|
||||||
`https://api.open-meteo.com/v1/forecast?latitude=${LAT}&longitude=${LNG}¤t=temperature_2m,relative_humidity_2m,weather_code&daily=temperature_2m_max,temperature_2m_min&temperature_unit=celsius&timezone=auto`
|
`https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lng}¤t=temperature_2m,relative_humidity_2m,weather_code&daily=temperature_2m_max,temperature_2m_min&temperature_unit=celsius&timezone=auto`
|
||||||
);
|
);
|
||||||
const data = await res.json();
|
const data = await res.json();
|
||||||
setWeather(data);
|
setWeather(data);
|
||||||
|
|
||||||
|
// Simple Reverse Geocode (approximate or just use timezone)
|
||||||
|
// Using a free reverse geocode API (limited, but fine for client side demo)
|
||||||
|
try {
|
||||||
|
const geoRes = await fetch(`https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=${lat}&longitude=${lng}&localityLanguage=en`);
|
||||||
|
const geoData = await geoRes.json();
|
||||||
|
if (geoData.city || geoData.locality) {
|
||||||
|
setLocationName(`${geoData.city || geoData.locality}, ${geoData.countryCode}`);
|
||||||
|
} else {
|
||||||
|
setLocationName('Local Weather');
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
setLocationName('Local Weather');
|
||||||
|
}
|
||||||
|
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error(e);
|
console.error(e);
|
||||||
} finally {
|
} finally {
|
||||||
@@ -26,9 +39,22 @@ export function WeatherCard() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
fetchWeather();
|
if (navigator.geolocation) {
|
||||||
const interval = setInterval(fetchWeather, 600000); // 10 mins
|
navigator.geolocation.getCurrentPosition(
|
||||||
return () => clearInterval(interval);
|
(position) => {
|
||||||
|
fetchWeather(position.coords.latitude, position.coords.longitude);
|
||||||
|
},
|
||||||
|
(error) => {
|
||||||
|
console.error("Geolocation error:", error);
|
||||||
|
// Fallback to NY if denied
|
||||||
|
fetchWeather(40.7128, -74.0060);
|
||||||
|
setLocationName('New York, US (Default)');
|
||||||
|
}
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
fetchWeather(40.7128, -74.0060);
|
||||||
|
setLocationName('New York, US (Default)');
|
||||||
|
}
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
@@ -41,6 +67,7 @@ export function WeatherCard() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (!weather?.current) {
|
if (!weather?.current) {
|
||||||
|
// ... error state
|
||||||
return (
|
return (
|
||||||
<div className="col-span-1 md:col-span-2 lg:col-span-2 row-span-1 bg-neutral-900 border border-neutral-800 rounded-xl p-6 flex items-center justify-center text-red-500">
|
<div className="col-span-1 md:col-span-2 lg:col-span-2 row-span-1 bg-neutral-900 border border-neutral-800 rounded-xl p-6 flex items-center justify-center text-red-500">
|
||||||
Failed to load weather
|
Failed to load weather
|
||||||
@@ -58,7 +85,7 @@ export function WeatherCard() {
|
|||||||
<Cloud size={18} />
|
<Cloud size={18} />
|
||||||
<span className="text-sm font-medium">Local Weather</span>
|
<span className="text-sm font-medium">Local Weather</span>
|
||||||
</div>
|
</div>
|
||||||
<span className="text-xs text-neutral-500 font-mono">New York, US</span>
|
<span className="text-xs text-neutral-500 font-mono">{locationName}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-end gap-4 mt-2">
|
<div className="flex items-end gap-4 mt-2">
|
||||||
|
|||||||
Reference in New Issue
Block a user