wg/monitor-im-flur
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Card components

Browse Source
This commit is contained in:
Darius Schefer
2025-08-29 03:18:08 +02:00
committed by Arif Hasanic
parent afde557605
commit 79117da969
11 changed files with 99 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/components/Dashboard/Dashboard.tsx
View File

@@ -1,5 +1,7 @@
import { useEffect, useState } from "react";
import Card from "@/components/Card/Card";
import CardHeader from "@/components/CardHeader/CardHeader";
import Datetime from "@/components/Datetime/Datetime";
import Flatastic from "@/components/Flatastic/Flatastic";
import Footer from "@/components/Footer/Footer";
@@ -10,7 +12,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(() => {
@@ -19,11 +22,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,
@@ -36,33 +39,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}>