4 files changed, 130 insertions, 0 deletions
diff --git a/packages/prosody-ui/src/fonts/FontChanger.tsx b/packages/prosody-ui/src/fonts/FontChanger.tsx
new file mode 100644
index 0000000..15c932e
--- /dev/null
+++ b/packages/prosody-ui/src/fonts/FontChanger.tsx
@@ -0,0 +1,64 @@
+import React, { useEffect, useState, type ReactNode } from "react";
+import fontIcon from "../assets/icons/font.svg";
+import { getScriptPredictor } from "glotscript";
+import ThaiFontLoader from "./Thai";
+
+function FontChanger({ text }: { text: string }) {
+  const [script, setScript] = useState<string | null>(null);
+  useEffect(() => {
+    const predictor = getScriptPredictor();
+    const res = predictor(text);
+    console.log("script predicted", res);
+    setScript(res[0]);
+  }, [text]);
+  useEffect(() => {
+    if (script === "Hani") setFontCount(12);
+    else if (script === "Thai") setFontCount(6);
+    else if (script === "Jpan") setFontCount(5);
+    // else if (script === "Latn") setFontCount(6)
+  }, [script]);
+  const [fontIdx, setFont] = useState(0);
+  const [fontCount, setFontCount] = useState(0);
+  function changeFont() {
+    if (fontIdx === fontCount) setFont(0);
+    else setFont((prev) => prev + 1);
+  }
+  return (
+    <div
+      className={`font-changer font-${script}-${fontIdx}`}
+      lang={script || ""}
+    >
+      <img
+        className="font-icon cp"
+        style={{ width: 25 }}
+        onClick={changeFont}
+        src={fontIcon}
+      />
+      {script === "Thai" ? <ThaiFontLoader text={text} /> : null}
+    </div>
+  );
+}
+// function FontChanger({
+//   lang,
+//   children,
+// }: {
+//   lang: string;
+//   children: ReactNode;
+// }) {
+//   useEffect(() => {}, []);
+//   const [script, setScript] = useState("Latn");
+//   const [fontIdx, setFont] = useState(0);
+//   const fontCount = 6;
+//   function changeFont() {
+//     if (fontIdx === fontCount) setFont(0);
+//     else setFont((prev) => prev + 1);
+//   }
+//   return (
+//     <div className="font-changer" lang={script}>
+//       <img className="font-icon cp" onClick={changeFont} src={fontIcon} />
+//       {children}
+//     </div>
+//   );
+// }
+
+export default FontChanger;
diff --git a/packages/prosody-ui/src/fonts/Hani.tsx b/packages/prosody-ui/src/fonts/Hani.tsx
new file mode 100644
index 0000000..f9cc602
--- /dev/null
+++ b/packages/prosody-ui/src/fonts/Hani.tsx
@@ -0,0 +1,14 @@
+import React, { useState, type ReactNode } from "react";
+import "../assets/fonts/Hani/style.css";
+
+function ChineseFontLoader({ children }: { children: ReactNode }) {
+  const [fontIdx, setFont] = useState(0);
+  const fontCount = 12;
+  function changeFont() {
+    if (fontIdx === fontCount) setFont(0);
+    else setFont((prev) => prev + 1);
+  }
+  return <div>{children}</div>;
+}
+
+export default ChineseFontLoader;
diff --git a/packages/prosody-ui/src/fonts/Thai.tsx b/packages/prosody-ui/src/fonts/Thai.tsx
new file mode 100644
index 0000000..0048316
--- /dev/null
+++ b/packages/prosody-ui/src/fonts/Thai.tsx
@@ -0,0 +1,8 @@
+import React, { useState, type ReactNode } from "react";
+import "../assets/fonts/Thai/style.css";
+
+function ThaiFontLoader({ text }: { text: string }) {
+  return <div>{text}</div>;
+}
+
+export default ThaiFontLoader;
diff --git a/packages/prosody-ui/src/fonts/useLangFont.tsx b/packages/prosody-ui/src/fonts/useLangFont.tsx
new file mode 100644
index 0000000..36fa603
--- /dev/null
+++ b/packages/prosody-ui/src/fonts/useLangFont.tsx
@@ -0,0 +1,44 @@
+import React, { useEffect, useState, type ReactNode } from "react";
+import fontIcon from "../assets/icons/font.svg";
+import { getScriptPredictor } from "glotscript";
+
+function useLangFont({ text }: { text: string }) {
+  useEffect(() => {
+    const predictor = getScriptPredictor();
+    const res = predictor(text);
+    console.log("script predicted", res);
+    setScript(res[0]);
+  }, [text]);
+  const [script, setScript] = useState<string | null>(null);
+  const [fontIdx, setFont] = useState(0);
+  const fontCount = 6;
+  function changeFont() {
+    if (fontIdx === fontCount) setFont(0);
+    else setFont((prev) => prev + 1);
+  }
+  // if (script === "Hani") return {}
+}
+// function FontChanger({
+//   lang,
+//   children,
+// }: {
+//   lang: string;
+//   children: ReactNode;
+// }) {
+//   useEffect(() => {}, []);
+//   const [script, setScript] = useState("Latn");
+//   const [fontIdx, setFont] = useState(0);
+//   const fontCount = 6;
+//   function changeFont() {
+//     if (fontIdx === fontCount) setFont(0);
+//     else setFont((prev) => prev + 1);
+//   }
+//   return (
+//     <div className="font-changer" lang={script}>
+//       <img className="font-icon cp" onClick={changeFont} src={fontIcon} />
+//       {children}
+//     </div>
+//   );
+// }
+
+export default useLangFont;