1 files changed, 92 insertions, 0 deletions
diff --git a/packages/prosody-ui/src/components/word/Phonetic.tsx b/packages/prosody-ui/src/components/word/Phonetic.tsx
new file mode 100644
index 0000000..db3d0cb
--- /dev/null
+++ b/packages/prosody-ui/src/components/word/Phonetic.tsx
@@ -0,0 +1,92 @@
+import React, { useCallback, useEffect, useState } from "react";
+import spinner from "../assets/icons/spinner.svg";
+import likeIcon from "../assets/icons/heart.svg";
+import commentsIcon from "../assets/icons/quote.svg";
+import shareIcon from "../assets/icons/share.svg";
+import fontIcon from "../assets/icons/font.svg";
+import bookmarkIcon from "../assets/icons/bookmark.svg";
+import type { AnalyzeRes, ColorTheme, Meaning } from "@/logic/types";
+import { P, Span, useSpeechSynthesis } from "@/hooks/useLang.tsx";
+import type { FullWordData, Syllable, Tone } from "@sortug/langlib";
+import { cycleNext } from "@sortug/lib";
+import FontChanger from "../fonts/FontChanger.tsx";
+import { assignColors } from "../Colors.tsx";
+import { IconBadgeFilled, IconSpeakerphone } from "@tabler/icons-react";
+
+function Phonetic({
+  data,
+  lang,
+  theme,
+}: {
+  data: FullWordData;
+  lang: string;
+  theme: ColorTheme;
+}) {
+  async function load() {
+    // const wiki = await fetchWiki(data.word);
+    // console.log(wiki, "wiki res");
+    // if ("ok" in wiki) setM(wiki.ok.meanings);
+    // else setError(wiki.error);
+    // setLoading(false);
+  }
+  useEffect(() => {
+    load();
+  }, []);
+  const [loading, setLoading] = useState(false);
+
+  const { voices, speaking, speak, stop } = useSpeechSynthesis();
+  function playAudio() {
+    setLoading(true);
+    console.log({ voices, speaking });
+    console.log("word", data);
+    speak(data.spelling);
+    setLoading(false);
+  }
+  console.log({ data });
+
+  async function saveW() {}
+
+  return (
+    <div className="phonetic-data">
+      <div className="pronunciation IPA flex1 flex-center">
+        <P>{data.phonetic.ipa}</P>
+        {loading ? (
+          <img src={spinner} className="spinner bc" />
+        ) : (
+          <IconSpeakerphone onClick={playAudio} />
+        )}
+      </div>
+      <Syllables data={data} />
+    </div>
+  );
+}
+
+export default Phonetic;
+
+function Syllables({ data }: { data: FullWordData }) {
+  const syllables = data.phonetic.syllables;
+
+  console.log(data.phonetic.tone_sequence);
+  const isTonal = !!data.phonetic.tone_sequence;
+  const colorMap = isTonal
+    ? (s: Syllable) => s.tone.name
+    : (s: Syllable) => (s.stressed ? "stressed" : "neuter");
+  const colors = assignColors(syllables.map(colorMap));
+  return (
+    <div className="syllables">
+      {data.phonetic.syllables.map((syl) => (
+        <div className="syllable">
+          {syl.tone.letters && <Tone tone={syl.tone} />}
+          <span>{syl.spelling}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+function Tone({ tone }: { tone: Tone }) {
+  return (
+    <div className="tone">
+      <IconBadgeFilled>{tone.letters}</IconBadgeFilled>
+    </div>
+  );
+}