Fixed weather location

This commit is contained in:
Akshay Kolli
2026-02-08 03:13:24 -05:00
parent 1b5ad291e4
commit 6bb3cea2aa

View File

@@ -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}&current=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}&current=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">