HomeAssistant update

src/components/HomeAssistant/HomeAssistant.tsx

@@ -1,9 +1,15 @@
 import { useEffect } from "react";
 import { useHomeAssistantStore } from "@/store/homeAssistant";
 
+import style from "./style.module.css";
+
 export default function Timetable() {
-    const fetchHomeAssistantData = useHomeAssistantStore((state) => state.fetch);
-    const tentTemperature = useHomeAssistantStore((state) => state.tentTemperature);
+    const fetchHomeAssistantData = useHomeAssistantStore(
+        (state) => state.fetch,
+    );
+    const tentTemperature = useHomeAssistantStore(
+        (state) => state.tentTemperature,
+    );
     const tentHumidity = useHomeAssistantStore((state) => state.tentHumidity);
 
     useEffect(() => {
@@ -17,8 +23,17 @@ export default function Timetable() {
     return (
         <div>
             <h1>Tent</h1>
-            <p>Temperature: {tentTemperature}°C</p>
-            <p>Humidity: {tentHumidity}%</p>
+            <div className={style.cardContainer}>
+                <div className={style.card}>
+                    <h4>Temperature</h4>
+                    <p>{tentTemperature}°C</p>
+                </div>
+
+                <div className={style.card}>
+                    <h4>Humidity</h4>
+                    <p>{tentHumidity}%</p>
+                </div>
+            </div>
         </div>
     );
 }

src/components/HomeAssistant/style.module.css

@@ -0,0 +1,18 @@
+.cardContainer {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+}
+
+.card {
+    height: 150px;
+    width: 150px;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    border: 1px solid rgba(220, 220, 220, 0.4);
+    box-shadow: 5px 5px 7px rgba(220, 220, 220, 0.5);
+    border-radius: 10px;
+}