1 files changed, 119 insertions, 0 deletions
diff --git a/packages/prosody-ui/src/components/Word.tsx b/packages/prosody-ui/src/components/Word.tsx
new file mode 100644
index 0000000..82939ce
--- /dev/null
+++ b/packages/prosody-ui/src/components/Word.tsx
@@ -0,0 +1,119 @@
+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 speakerIcon from "../assets/icons/speaker.svg";
+import type { AnalyzeRes, Meaning } from "../logic/types";
+import { ColoredText } from "./Sentence.tsx";
+import { P, Span, useSpeechSynthesis } from "../hooks/useLang.tsx";
+
+function Word({ data, lang }: { data: AnalyzeRes; lang: string }) {
+  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 [error, setError] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [meanings, setM] = useState<Meaning[]>([]);
+  const [font, setFont] = useState(0);
+
+  function changeFont() {
+    if (font === 6) setFont(0);
+    else setFont(font + 1);
+  }
+  const { voices, speaking, speak, stop } = useSpeechSynthesis();
+  function playAudio() {
+    console.log({ voices, speaking });
+    console.log("word", data.word);
+    speak(data.word);
+  }
+
+  async function saveW() {}
+
+  return (
+    <div className={`font-${font}`} id="word-modal" title={data.word}>
+      <img className="font-icon cp" onClick={changeFont} src={fontIcon} />
+      <img className="save-icon cp" onClick={saveW} src={bookmarkIcon} />
+      <div className="original">
+        <ColoredText frags={data.syllables} />
+      </div>
+      <div className="pronunciation IPA flex1 flex-center">
+        <P>{`/${data.ipa.replace(/\s/g, "")}/`}</P>
+        <img onClick={playAudio} className="icon cp" src={speakerIcon} />
+      </div>
+      <div className="meanings">
+        {loading ? (
+          <img src={spinner} className="spinner bc" />
+        ) : (
+          meanings.map((m) => (
+            <div key={JSON.stringify(m)} className="meaning">
+              <div className="pos">
+                <Span>{m.pos}</Span>
+              </div>
+              <ol>
+                {m.meaning.map((t, i) => (
+                  <li key={t + i} className="translation">
+                    <P>{t}</P>
+                  </li>
+                ))}
+              </ol>
+            </div>
+          ))
+        )}
+        {error && <div className="error">{error}</div>}
+      </div>
+    </div>
+  );
+}
+
+export default Word;
+
+// function FloatingButtons({
+//   tweet,
+//   avatar,
+//   changeFont,
+// }: {
+//   tweet: Tweet;
+//   avatar: string;
+//   changeFont: any;
+// }) {
+//   const { apiKeys, prompts, setModal } = useGlobalState();
+//   function openUser() {}
+//   function openComments() {}
+//   function openShare() {}
+//   async function doLike() {
+//     const key = apiKeys.openai;
+//     // TODO hide button if key not set
+//     console.log(tweet.text, "whole text");
+//     console.log(tweet.media, "media");
+//     if (tweet.media[0] && !tweet.media[0].isVideo) {
+//       const res = await vision(tweet.media[0].url, "", key);
+//       console.log(res, "vision res");
+//     }
+//     // const res = await translate(tweet.text, prompts.translate,key);
+//     // if ("ok" in res)
+//     // setModal(<TranslationModal text={res.ok.choices[0].message.content}/>)
+//   }
+//   async function doBookmark() {}
+//   return (
+//     <div id="entry-icons">
+//       <div className="avatar">
+//         <img className="cp" onClick={openUser} src={avatar} />
+//       </div>
+//       <img className="cp" onClick={doLike} src={likeIcon} />
+//       <img className="cp" onClick={openComments} src={commentsIcon} />
+//       <img className="cp" onClick={doBookmark} src={bookmarkIcon} />
+//       <img className="cp" onClick={openShare} src={shareIcon} />
+//       <img className="cp" onClick={changeFont} src={fontIcon} />
+//     </div>
+//   );
+// }