new idea for writer

html/write.tsx

@@ -0,0 +1,42 @@
+import { toChildArray, ComponentChildren } from "preact";
+import { Main, render_and_copy } from "./common.tsx";
+
+// idea is to have buttons you can click to type out words, should be fun
+// (and maybe possible)
+// new idea: type out eggbug or you LOSE
+const Key = ({ letter }: { letter: string }) => (
+    <details class="key">
+        <summary class="keycap">{letter}</summary>
+        <div
+            class="keyout"
+            style={{ left: (sentence.indexOf(letter) ?? 0) + "em" }}
+        >
+            {letter}
+        </div>
+    </details>
+);
+
+const sentence = "cwm fjord bank glyphs vext quiz";
+
+const KeyRow = ({ keys }: { keys: string }) => (
+    <div class="keyrow">
+        {...keys.split("").map(letter => <Key letter={letter} />)}
+    </div>
+);
+
+const Keyboard = ({ children }: { children: ComponentChildren }) => (
+    <div class="keyboard">{...toChildArray(children)}</div>
+);
+
+const Out = () => <div class="out"></div>;
+
+render_and_copy(
+    <Main>
+        <Keyboard>
+            <KeyRow keys="qwertyuiop" />
+            <KeyRow keys="asdfghjkl" />
+            <KeyRow keys="zxcvbnm" />
+        </Keyboard>
+        <Out />
+    </Main>
+);