add weather module

src/components/Weather/Weather.tsx

@@ -0,0 +1,41 @@
+import { useEffect } from "react";
+import { useWeatherStore } from "@/store/weather";
+
+import styles from "./style.module.css";
+
+export default function Weather() {
+    const weatherData = useWeatherStore((state) => state.weatherData);
+    const fetchWeatherData = useWeatherStore((state) => state.fetchWeatherData);
+
+    useEffect(() => {
+        fetchWeatherData();
+        const interval = setInterval(() => {
+            fetchWeatherData();
+        }, 10 * 60000);
+        return () => clearInterval(interval);
+    }, [fetchWeatherData]);
+
+    if (!weatherData.current) {
+        return <div>Loading...</div>;
+    }
+
+    return (
+        <div className={styles.weatherContainer}>
+            <div className={styles.currentTemperature}>
+                <img
+                    src={weatherData.current.icon}
+                    alt={weatherData.current.weather_description}
+                />
+                <span>{weatherData.current.temperature_2m.toFixed(1)}°C</span>
+            </div>
+            <div className={styles.dailyTemperatures}>
+                <span className={styles.minTemperature}>
+                    {weatherData.daily.temperature_2m_min[0].toFixed(1)}°C
+                </span>
+                <span className={styles.maxTemperature}>
+                    {weatherData.daily.temperature_2m_max[0].toFixed(1)}°C
+                </span>
+            </div>
+        </div>
+    );
+}

src/components/Weather/style.module.css

@@ -0,0 +1,30 @@
+.weatherContainer {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    padding: 3px;
+    padding-right: 15px;
+}
+
+.currentTemperature {
+    display: flex;
+    align-items: center;
+    font-size: 2rem;
+    font-weight: bold;
+    padding-right: 5px;
+}
+
+.dailyTemperatures {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.min-temperature {
+    color: blue;
+}
+
+.max-temperature {
+    color: red;
+}