Files
monitor-im-flur/src/components/Footer/Footer.tsx

51 lines
1.6 KiB
TypeScript

import { useEffect, useState } from "react";
import Marquee from "react-fast-marquee";
import pasta from "./pasta.ts";
import style from "./style.module.css";
export default function Footer() {
const [index, setIndex] = useState(0);
// random shitpost every minute
useEffect(() => {
const timer = setInterval(() => {
setIndex(Math.floor(Math.random() * pasta.length));
console.log("sus!");
}, 60 * 1000);
return () => {
clearInterval(timer);
};
}, []);
const text = pasta[index];
return (
<div className={style.container}>
<div className={style.taskbar}>
<div className={style.startButton}>
<img
className={style.startIcon}
src="src/assets/weed.png"
alt="4:20"
/>
Start
</div>
<span className={style.divider}></span>
<div className={style.windows}>
<span className={style.window}>🧹 Flatastic</span>
<span className={style.window}>🚊 Timetable</span>
<span className={style.window}>🏠 HomeAssistant</span>
</div>
</div>
<div className={style.newsticker}>
<div className={style.info}>BREAKING</div>
<div className={style.marquee}>
<Marquee>{text}</Marquee>
</div>
</div>
</div>
);
}