Add Card components

src/components/Dashboard/Dashboard.tsx

@@ -1,5 +1,8 @@
 import { useEffect, useState } from "react";
 
+import Card from "@/components/Card/Card";
+import CardColumn from "@/components/CardColumn/CardColumn";
+import CardHeader from "@/components/CardHeader/CardHeader";
 import Flatastic from "@/components/Flatastic/Flatastic";
 import HomeAssistant from "@/components/HomeAssistant/HomeAssistant";
 import Timetable from "@/components/Timetable/Timetable";
@@ -11,7 +14,8 @@ import style from "./style.module.css";
 
 export default function Dashboard() {
     const schemes = [style.day, style.evening, style.night];
-    const [scheme, setScheme] = useState(style.day);
+    const [schemeIndex, setSchemeIndex] = useState(0);
+    const scheme = schemes[schemeIndex];
 
     // change background color based on time of day
     const time = useEffect(() => {
@@ -20,11 +24,11 @@ export default function Dashboard() {
                 let d = new Date();
                 let hour = d.getHours();
                 if (hour >= 7 && hour < 16) {
-                    setScheme(style.day);
-                } else if (hour < 23) {
-                    setScheme(style.evening);
+                    setSchemeIndex(0);
+                } else if (hour >= 16 && hour < 23) {
+                    setSchemeIndex(1);
                 } else {
-                    setScheme(style.night);
+                    setSchemeIndex(2);
                 }
             },
             20 * 60 * 1000,
@@ -37,33 +41,27 @@ export default function Dashboard() {
     return (
         <div className={`${style.dashboard} ${scheme}`}>
             <div className={style.cardWrapper}>
-                <div className={style.card}>
-                    <div className={style.cardHeaderInactive}>🚊 Timetable</div>
-                    <div className={style.cardContent}>
-                        <Timetable />
-                    </div>
-                </div>
+                <Card>
+                    <CardHeader icon="🚊" content="Timetable" />
+                    <Timetable />
+                </Card>
 
-                <div className={style.clock}>
-                    <div className={style.card}>
-                        <div className={style.cardHeaderInactive}>🕐 Clock</div>
+                <div className={style.small}>
+                    <Card>
+                        <CardHeader icon="🕐" content="Clock" />
                         <Datetime />
-                    </div>
+                    </Card>
                 </div>
 
-                <div className={style.card}>
-                    <div className={style.terminal}>
-                        <div className={style.cardHeader}>🔔 Terminal</div>
-                        <Terminal />
-                    </div>
-                </div>
+                <Card>
+                    <CardHeader icon="🔔" content="Terminal" active={true} />
+                    <Terminal />
+                </Card>
 
-                <div className={style.card}>
-                    <div className={style.cardHeaderInactive}>🧹 Flatastic</div>
-                    <div className={style.cardContent}>
-                        <Flatastic />
-                    </div>
-                </div>
+                <Card>
+                    <CardHeader icon="🧹" content="Flatastic" />
+                    <Flatastic />
+                </Card>
             </div>
 
             <div className={style.footer}>