1 files changed, 77 insertions, 0 deletions
diff --git a/packages/prosody-ui/src/latin/LatinText.tsx b/packages/prosody-ui/src/latin/LatinText.tsx
new file mode 100644
index 0000000..e5b13ff
--- /dev/null
+++ b/packages/prosody-ui/src/latin/LatinText.tsx
@@ -0,0 +1,77 @@
+import React, { useCallback, useEffect, useState } from "react";
+import type { AnalyzeRes } from "../logic/types";
+import { ColoredText } from "../components/Sentence";
+import Word from "../components/Word";
+import { iso6393To1 } from "../logic/iso6393to1";
+
+function segmentate(
+  text: string,
+  lang: string,
+  granularity: "sentence" | "word" | "grapheme",
+) {
+  // TODO proper error handling here
+  console.log("segmenting", lang);
+  const la = iso6393To1[lang];
+  const lng = la || lang;
+  const segmenter = new Intl.Segmenter(lng, { granularity });
+  const segments = Array.from(segmenter.segment(text));
+  console.log("seg", segments[0]);
+  return segments.reduce((acc: string[], s) => {
+    const trimmed = s.segment.trim();
+    if (trimmed) return [...acc, trimmed];
+    else return acc;
+  }, []);
+}
+
+export default function LatinText({
+  text,
+  lang,
+  openWord,
+}: {
+  text: string;
+  lang: string;
+  openWord?: (word: string) => void;
+}) {
+  useEffect(() => {
+    const sentences = segmentate(text, lang, "sentence");
+    if (sentences) setSentences(sentences);
+  }, [text]);
+  const [sentences, setSentences] = useState<string[]>([]);
+  console.log({ sentences });
+  return (
+    <>
+      {sentences.map((s, i) => (
+        <Sentence key={s + i} text={s} lang={lang} openWord={openWord} />
+      ))}
+    </>
+  );
+}
+
+function Sentence({
+  text,
+  lang,
+  openWord,
+}: {
+  text: string;
+  lang: string;
+
+  openWord?: (word: string) => void;
+}) {
+  useEffect(() => {
+    const w = segmentate(text, lang, "word");
+    if (w) setWords(w);
+    console.log({ words });
+  }, [text]);
+  const [words, setWords] = useState<string[]>([]);
+  console.log({ words });
+
+  // const [data, setData] = useState<Record<string, AnalyzeRes>>({});
+  const [word, setWord] = useState<AnalyzeRes>();
+
+  return (
+    <>
+      <ColoredText frags={words} fn={openWord} />;
+      {word && <Word data={word} lang={lang} />}
+    </>
+  );
+}