73 lines
2.3 KiB
TypeScript
73 lines
2.3 KiB
TypeScript
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";
|
|
import Datetime from "@/components/Datetime/Datetime";
|
|
import Terminal from "@/components/Terminal/Terminal";
|
|
import Footer from "@/components/Footer/Footer";
|
|
|
|
import style from "./style.module.css";
|
|
|
|
export default function Dashboard() {
|
|
const schemes = [style.day, style.evening, style.night];
|
|
const [schemeIndex, setSchemeIndex] = useState(0);
|
|
const scheme = schemes[schemeIndex];
|
|
|
|
// change background color based on time of day
|
|
const time = useEffect(() => {
|
|
const timer = setInterval(
|
|
() => {
|
|
let d = new Date();
|
|
let hour = d.getHours();
|
|
if (hour >= 7 && hour < 16) {
|
|
setSchemeIndex(0);
|
|
} else if (hour >= 16 && hour < 23) {
|
|
setSchemeIndex(1);
|
|
} else {
|
|
setSchemeIndex(2);
|
|
}
|
|
},
|
|
20 * 60 * 1000,
|
|
);
|
|
return () => {
|
|
clearInterval(timer);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div className={`${style.dashboard} ${scheme}`}>
|
|
<div className={style.cardWrapper}>
|
|
<Card>
|
|
<CardHeader icon="🚊" content="Timetable" />
|
|
<Timetable />
|
|
</Card>
|
|
|
|
<div className={style.small}>
|
|
<Card>
|
|
<CardHeader icon="🕐" content="Clock" />
|
|
<Datetime />
|
|
</Card>
|
|
</div>
|
|
|
|
<Card>
|
|
<CardHeader icon="🔔" content="Terminal" active={true} />
|
|
<Terminal />
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader icon="🧹" content="Flatastic" />
|
|
<Flatastic />
|
|
</Card>
|
|
</div>
|
|
|
|
<div className={style.footer}>
|
|
<Footer />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|