feat: enhance WeatherWidget to use geolocation for current weather data

Author: py-dev-nandini-12

src/app/weather-widget.tsx

@@ -1,28 +1,58 @@
 import { useState, useEffect } from "react";
 
 export default function WeatherWidget() {
-  interface Weather {
-    temperature: number;
-    windspeed: number;
-  }
-
-  const [weather, setWeather] = useState<Weather | null>(null);
-  const [city] = useState("New York");
+  const [weather, setWeather] = useState<WeatherData | null>(null);
+  const [location, setLocation] = useState<{
+    latitude: number | null;
+    longitude: number | null;
+  }>({
+    latitude: null,
+    longitude: null,
+  });
   const [error, setError] = useState("");
 
   useEffect(() => {
-    fetchWeather();
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition(
+        (position) => {
+          setLocation({
+            latitude: position.coords.latitude,
+            longitude: position.coords.longitude,
+          });
+        },
+        () => {
+          setError("Unable to retrieve your location.");
+        }
+      );
+    } else {
+      setError("Geolocation is not supported by your browser.");
+    }
   }, []);
 
-  const fetchWeather = async () => {
+  useEffect(() => {
+    if (location.latitude && location.longitude) {
+      fetchWeather(location.latitude, location.longitude);
+    }
+  }, [location]);
+
+  interface WeatherData {
+    temperature: number;
+    windspeed: number;
+  }
+
+  const fetchWeather = async (
+    latitude: number,
+    longitude: number
+  ): Promise<void> => {
     try {
       const response = await fetch(
-        `https://api.open-meteo.com/v1/forecast?latitude=40.7128&longitude=-74.0060&current_weather=true`
+        `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&current_weather=true`
       );
       if (!response.ok) throw new Error("Failed to fetch weather data");
-      const data = await response.json();
+      const data: { current_weather: WeatherData } = await response.json();
       setWeather(data.current_weather);
-    } catch {
+    } catch (err) {
+      console.error(err);
       setError("Unable to fetch weather data.");
     }
   };
@@ -31,7 +61,7 @@ export default function WeatherWidget() {
     <div
       style={{ border: "1px solid #ccc", padding: "10px", borderRadius: "8px" }}
     >
-      <h3>Weather in {city}</h3>
+      <h3>Current Weather</h3>
       {error && <p style={{ color: "red" }}>{error}</p>}
       {weather ? (
         <div>