1 files changed, 19 insertions, 19 deletions

diff --git a/packages/prosody-ui/src/thai/ThaiText.tsx b/packages/prosody-ui/src/thai/ThaiText.tsx
index fc1e1e6..794804a 100644
--- a/packages/prosody-ui/src/thai/ThaiText.tsx
+++ b/packages/prosody-ui/src/thai/ThaiText.tsx
@@ -1,49 +1,49 @@
 import React, { useCallback, useEffect, useState } from "react";
 import "../assets/fonts/Thai/style.css";
 import { segmentateThai } from "./logic/thainlp";
-import type { AnalyzeRes } from "../logic/types";
+import type { AnalyzeRes, ColorTheme, LangToColor } from "../logic/types";
 import { ColoredText } from "../components/Sentence";
 import Word from "../components/Word";
 
 export default function ThaiText({
   text,
   openWord,
+  theme,
 }: {
   text: string;
-  openWord: (s: string) => void;
+  openWord: (s: AnalyzeRes) => void;
+  theme: ColorTheme;
 }) {
   useEffect(() => {
     pythonseg();
   }, [text]);
 
-  const [data, setData] = useState<Record<string, AnalyzeRes>>({});
+  const [data, setData] = useState<Array<LangToColor<AnalyzeRes>>>([]);
   const [modal, setModal] = useState<any>();
   const pythonseg = useCallback(async () => {
     const s2 = await segmentateThai(text.trim());
     if ("ok" in s2) {
-      const ob = s2.ok.reduce((acc, item) => {
-        acc[item.word] = item;
-        return acc;
-      }, {} as any);
-      setData(ob);
+      const ob = s2.ok.reduce(
+        (acc, item) => {
+          acc[item.word] = item;
+          return acc;
+        },
+        {} as Record<string, AnalyzeRes>,
+      );
+      const d = Object.values(ob).map((w) => ({
+        data: w,
+        colorBy: w.pos,
+        display: w.word,
+      }));
+      setData(d);
       console.log(s2, "s2");
     } else console.error(s2.error);
   }, [text]);
 
-  // function openWord(e: React.MouseEvent<any>) {
-  //   const s = e.currentTarget.innerText;
-  //   const d = data[s];
-  //   setModal(d);
-  //   // setModal(<WordModal data={d} lang={lang} />);
-  // }
   return (
     <div className="thaitext">
-      <ColoredText lang="tha" frags={Object.keys(data)} fn={openWord} />
+      <ColoredText lang="tha" theme={theme} frags={data} fn={openWord} />
       {modal && <Word data={modal} lang={"tha"} />}
     </div>
   );
 }
-
-function ThaiWord() {
-  return <div />;
-}