1 files changed, 57 insertions, 0 deletions
diff --git a/packages/prosody-ui/src/components/Sentence.tsx b/packages/prosody-ui/src/components/Sentence.tsx
new file mode 100644
index 0000000..33144ac
--- /dev/null
+++ b/packages/prosody-ui/src/components/Sentence.tsx
@@ -0,0 +1,57 @@
+import React from "react";
+import { notRandomFromArray } from "sortug";
+import "./sentence.css";
+
+export function ColoredText({
+  frags,
+  fn,
+  lang,
+}: {
+  frags: string[];
+  fn?: (s: string) => void;
+  lang?: string;
+}) {
+  return (
+    <>
+      {frags.map((s, i) => {
+        const prev = frags[i - 1];
+        const prevC = prev ? notRandomFromArray(prev, colors) : "lol";
+        const color = notRandomFromArray(s, colors);
+        const opacity = prev && prevC === color ? 0.8 : 1;
+        const style = { color, opacity };
+        console.log({ style });
+        return <CTInner lang={lang} key={s + i} s={s} style={style} fn={fn} />;
+      })}
+    </>
+  );
+}
+
+export function CTInner({
+  s,
+  style,
+  fn,
+  lang,
+}: {
+  s: string;
+  style: any;
+  fn?: (s: string) => void;
+  lang?: string;
+}) {
+  function handleClick(e: React.MouseEvent<HTMLSpanElement>) {
+    console.log(!!fn, "fn");
+    if (fn) fn(e.currentTarget.innerText.trim());
+  }
+  return (
+    <span lang={lang} onClick={handleClick} className="word cp" style={style}>
+      {s}
+    </span>
+  );
+}
+export const colors = [
+  "#8c2c2c",
+  "#000000",
+  "#ffd400",
+  "#1513a0",
+  "#7e7e7e",
+  "1eb52d",
+];