40 lines
1.4 KiB
TypeScript
40 lines
1.4 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { useApp } from "~/hooks/useApp";
|
|
|
|
export const Off = () => {
|
|
const { state, setState } = useApp();
|
|
const [booting, setBooting] = useState(state === "reboot");
|
|
|
|
useEffect(() => {
|
|
if (booting) {
|
|
const timout = setTimeout(() => {
|
|
if (state === "suspend") {
|
|
setState("login");
|
|
} else {
|
|
setState("boot");
|
|
}
|
|
}, 1000);
|
|
|
|
return () => clearTimeout(timout);
|
|
}
|
|
}, [booting]);
|
|
|
|
return (
|
|
<div className="flex h-screen w-screen items-center justify-center bg-black">
|
|
<button
|
|
className={`drop-shadow-white cursor-pointer transition-all ${
|
|
booting ? "animate-disappear" : "animate-breathing"
|
|
}`}
|
|
onClick={() => setBooting(true)}
|
|
>
|
|
<svg viewBox="0 0 34 34" width="128">
|
|
<path
|
|
fill="#ffffff"
|
|
d="M 14 1 L 14 13 L 15 13 L 15 1 L 14 1 z M 19 1 L 19 13 L 20 13 L 20 1 L 19 1 z M 9 3.1855469 C 4.1702837 5.9748853 1.0026451 11.162345 1 17 C 1 25.836556 8.163444 33 17 33 C 25.836556 33 33 25.836556 33 17 C 32.99593 11.163669 29.828666 5.9780498 25 3.1894531 L 25 4.3496094 C 29.280842 7.0494632 31.988612 11.788234 32 17 C 32 25.284271 25.284271 32 17 32 C 8.7157288 32 2 25.284271 2 17 C 2.0120649 11.788824 4.7195457 7.0510246 9 4.3515625 L 9 3.1855469 z "
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|