add weather module

src/components/Card/Card.tsx

@@ -1,5 +1,11 @@
 import style from "./style.module.css";
 
-export default function Card({ active, children }) {
+export default function Card({
+    active,
+    children,
+}: {
+    active?: boolean;
+    children: React.ReactNode;
+}) {
     return <div className={style.card}>{children}</div>;
 }

src/components/CardHeader/CardHeader.tsx

@@ -3,7 +3,7 @@ import style from "./style.module.css";
 export default function CardHeader({ icon, content, active = false }) {
     let containerClass = style.container;
     if (active) {
-        containerClass += " " + style.active;
+        containerClass += ` ${style.active}`;
     }
     return (
         <div className={containerClass}>

src/components/Dashboard/Dashboard.tsx

@@ -7,7 +7,7 @@ import Flatastic from "@/components/Flatastic/Flatastic";
 import Footer from "@/components/Footer/Footer";
 import Terminal from "@/components/Terminal/Terminal";
 import Timetable from "@/components/Timetable/Timetable";
-
+import Weather from "../Weather/Weather";
 import style from "./style.module.css";
 
 export default function Dashboard() {
@@ -43,14 +43,18 @@ export default function Dashboard() {
                     <CardHeader icon="🚊" content="Timetable" />
                     <Timetable />
                 </Card>
-
-                <div className={style.small}>
+                <div className={style.clockAndWeather}>
+                    <div className={style.small}>
+                        <Card>
+                            <CardHeader icon="🕐" content="Clock" />
+                            <Datetime />
+                        </Card>
+                    </div>
                     <Card>
-                        <CardHeader icon="🕐" content="Clock" />
-                        <Datetime />
+                        <CardHeader icon="🌤️" content="Weather" />
+                        <Weather />
                     </Card>
                 </div>
-
                 <Card>
                     <CardHeader icon="🔔" content="Terminal" active={true} />
                     <Terminal />
@@ -61,7 +65,6 @@ export default function Dashboard() {
                     <Flatastic />
                 </Card>
             </div>
-
             <div className={style.footer}>
                 <Footer />
             </div>

src/components/Dashboard/style.module.css

@@ -20,6 +20,11 @@
     background-color: #2a3f55;
 }
 
+.clockAndWeather {
+    display: flex;
+    align-items: center;
+}
+
 .cardWrapper {
     margin: 30px;
     height: 100%;

src/components/Flatastic/Flatastic.tsx

@@ -9,10 +9,12 @@ export default function Flatastic() {
     const fetchFlatasticData = useFlatasticStore((state) => state.fetch);
     const flatasticData = useFlatasticStore((state) => state.flatasticData);
     const chores = (flatasticData?.chores as FlatasticChore[]) || [];
+
     chores.sort(
         (a, b) =>
             a.timeLeftNext - b.timeLeftNext && b.rotationTime - a.rotationTime,
     );
+
     const users = flatasticData?.users;
     const idToNameMap: Record<number, string> = {};
     users.forEach((user: FlatasticUser) => {

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;
+}