feat: implement WeatherForm component and integrate weather fetching functionality.

Also added a weather data card where the design is displayed

frontend/src/components/IsLoading.tsx

@@ -1,15 +0,0 @@
-import React from "react";
-
-interface Props {
-  message: string;
-}
-
-const IsLoading: React.FC<Props> = ({ message }) => {
-  return (
-    <div>
-      <p>{message}</p>
-    </div>
-  );
-};
-
-export default IsLoading;

frontend/src/components/WeatherData.tsx

@@ -1,10 +1,60 @@
 import React from "react";
+import sunriseIcon from "../assets/icons/sunrise-fill.svg";
+import sunsetIcon from "../assets/icons/sunset-fill.svg";
 
 const WeatherData: React.FC = () => {
+  const weatherRaw = localStorage.getItem("weather");
+  const weatherData = JSON.parse(weatherRaw || "{}");
+
+  // OpenWeatherMap Icon-URL
+  const iconCode = weatherData?.weather?.[0]?.icon;
+  const iconUrl = iconCode
+    ? `https://openweathermap.org/img/wn/${iconCode}@4x.png`
+    : "";
+
   return (
-    <>
-      <p>Weather</p>
-    </>
+    <div className="flex justify-center items-center min-h-[80vh]">
+      <div className="bg-white/80 p-8 rounded-xl shadow-lg min-w-[300px] text-center">
+        <h2 className="text-2xl font-semibold mb-2">{weatherData?.name}</h2>
+        <p className="text-4xl font-bold mb-2">{weatherData?.main?.temp} °C</p>
+        <p className="text-lg mb-4 capitalize">
+          {weatherData?.weather?.[0]?.description}
+        </p>
+        {iconUrl && (
+          <img
+            src={iconUrl}
+            alt={weatherData?.weather?.[0]?.description}
+            className="mx-auto mb-4 w-32 h-32"
+          />
+        )}
+        <div className="flex flex-col items-center gap-2 mb-2">
+          <div className="flex items-center gap-2">
+            <img src={sunriseIcon} alt="Sunrise Icon" className="w-6 h-6" />
+            <span className="text-base">
+              Sunrise:{" "}
+              {weatherData?.sys?.sunrise
+                ? new Date(weatherData.sys.sunrise * 1000).toLocaleTimeString(
+                    "de-DE",
+                    { hour: "2-digit", minute: "2-digit" }
+                  )
+                : "--:--"}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <img src={sunsetIcon} alt="Sunset Icon" className="w-6 h-6" />
+            <span className="text-base">
+              Sunset:{" "}
+              {weatherData?.sys?.sunset
+                ? new Date(weatherData.sys.sunset * 1000).toLocaleTimeString(
+                    "de-DE",
+                    { hour: "2-digit", minute: "2-digit" }
+                  )
+                : "--:--"}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
   );
 };
 

frontend/src/components/WeatherForm.tsx

@@ -21,7 +21,7 @@ const WeatherCard: React.FC = () => {
     event.preventDefault();
     setLoading(true);
     toast
-      .promise(fetchWeather(city, getAPIKey()), {
+      .promise(fetchWeather(city, getAPIKey(), "metric"), {
         pending: "Fetching weather data...",
         success: "Weather data loaded successfully!",
         error: "Error loading weather data! (Check console for details)",