feat: add off, booting and sddm view

src/components/Boot.tsx

@@ -0,0 +1,37 @@
+import { useEffect, useState } from "react";
+import { useApp } from "~/hooks/useApp";
+
+const LINES = [
+  "Loading Linux...",
+  "Loading initial ramdisk...",
+  "Feeding the cat...",
+  "Cleaning my room...",
+  "Preparing tuna tomato couscous...",
+  "Ready",
+];
+
+export const Boot = () => {
+  const { setState } = useApp();
+  const [line, setLine] = useState(0);
+
+  useEffect(() => {
+    if (line >= LINES.length) {
+      setState("login");
+      return;
+    }
+
+    const timeout = setTimeout(
+      () => setLine(line + 1),
+      Math.random() * 750 + 200,
+    );
+    return () => clearTimeout(timeout);
+  }, [setState, line]);
+
+  return (
+    <main className="h-screen w-screen bg-black text-white">
+      {LINES.filter((_, i) => i <= line).map((line, i) => (
+        <p key={i}>{line}</p>
+      ))}
+    </main>
+  );
+};