1 files changed, 45 insertions, 0 deletions
diff --git a/src/components/Flashcard/SyllableSpan.tsx b/src/components/Flashcard/SyllableSpan.tsx
new file mode 100644
index 0000000..445895e
--- /dev/null
+++ b/src/components/Flashcard/SyllableSpan.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { syllableAction, thaiAnalysis } from "@/actions/lang";
+import { CardResponse } from "@/lib/types/cards";
+import { ReactNode, useState, useTransition } from "react";
+import { Spinner } from "../ui/spinner";
+import Modal from "@/components/Modal";
+import { getRandomHexColor } from "@/lib/utils";
+
+const SyllableSpan: React.FC<{ spelling: string; lang: string }> = ({
+  spelling,
+  lang,
+}) => {
+  const [modalContent, setModalContent] = useState<ReactNode | null>(null);
+
+  const closeModal = () => setModalContent(null);
+
+  const [isPending, startTransition] = useTransition();
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    startTransition(async () => {
+      const modal = await syllableAction(spelling, lang);
+      setModalContent(modal);
+    });
+  };
+
+  return (
+    <>
+      <span
+        onClick={handleClick}
+        className="m-1 hover:text-6xl"
+        style={{ color: getRandomHexColor() }}
+      >
+        {spelling}
+      </span>
+      {modalContent && (
+        <Modal onClose={closeModal} isOpen={!!modalContent}>
+          {modalContent}
+        </Modal>
+      )}
+    </>
+  );
+};
+
+export default SyllableSpan;