Terminal window

src/components/Terminal/Terminal.tsx

@@ -0,0 +1,41 @@
+import { useEffect } from "react";
+import { useHomeAssistantStore } from "@/store/homeAssistant";
+
+import pasta from "./pasta.ts";
+import style from "./style.module.css";
+
+export default function Terminal() {
+    const fetchHomeAssistantData = useHomeAssistantStore(
+        (state) => state.fetch,
+    );
+    const tentTemperature = useHomeAssistantStore(
+        (state) => state.tentTemperature,
+    );
+    const tentHumidity = useHomeAssistantStore((state) => state.tentHumidity);
+
+    useEffect(() => {
+        fetchHomeAssistantData();
+        const interval = setInterval(() => {
+            fetchHomeAssistantData();
+        }, 60000);
+        return () => clearInterval(interval);
+    }, [fetchHomeAssistantData]);
+
+    return (
+        <div className={style.container}>
+            <span className={style.title}>
+                -[#rauchen]---muehlburger-bubatz-buben.de-
+            </span>
+            <span className={style.infoMessage}>
+                <span className={style.bubatzBot}>[BubatzBot]:</span>
+                **UPDATE** Tent: <b>{tentTemperature}°C</b>,{" "}
+                <b>{tentHumidity}%</b>
+            </span>
+
+            <span className={style.message}>
+                <span className={style.pastaBot}>[anonymous]:</span>
+                <span className={style.pasta}>{pasta[0]}</span>
+            </span>
+        </div>
+    );
+}