89 lines
2.8 KiB
TypeScript
89 lines
2.8 KiB
TypeScript
import FourTwenty from "@components/FourTwenty/FourTwenty";
|
|
import classNames from "classnames";
|
|
import { useEffect, useState } from "react";
|
|
import Amogus from "@/components/Amogus/Amogus";
|
|
import Card from "@/components/Card/Card";
|
|
import {
|
|
CardColumn,
|
|
CardRow,
|
|
} from "@/components/CardContainers/CardContainers";
|
|
import Datetime from "@/components/Datetime/Datetime";
|
|
import Flatastic from "@/components/Flatastic/Flatastic";
|
|
import Footer from "@/components/Footer/Footer";
|
|
import Terminal from "@/components/Terminal/Terminal";
|
|
import Timetable from "@/components/Timetable/Timetable";
|
|
import Weather from "@/components/Weather/Weather";
|
|
|
|
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
|
|
useEffect(() => {
|
|
const timer = setInterval(
|
|
() => {
|
|
const d = new Date();
|
|
const 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}`}>
|
|
<Amogus />
|
|
<div className={style.body}>
|
|
<CardColumn>
|
|
<Card icon="🚊" name="Timetable">
|
|
<Timetable />
|
|
</Card>
|
|
|
|
<CardRow>
|
|
<Card icon="🕐" name="Clock">
|
|
<Datetime />
|
|
</Card>
|
|
|
|
<Card icon="🌤" name="Weather">
|
|
<Weather />
|
|
</Card>
|
|
|
|
<div
|
|
className={classNames(
|
|
style.bouncingWindow,
|
|
style.hidden,
|
|
)}
|
|
>
|
|
<Card icon="🍁" name="420">
|
|
<FourTwenty />
|
|
</Card>
|
|
</div>
|
|
</CardRow>
|
|
|
|
<Card icon="🔔" name="Terminal" active={true}>
|
|
<Terminal />
|
|
</Card>
|
|
|
|
<Card icon="🧹" name="Flatastic">
|
|
<Flatastic />
|
|
</Card>
|
|
</CardColumn>
|
|
</div>
|
|
|
|
<Footer />
|
|
</div>
|
|
);
|
|
}
|