"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(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 ( <> {spelling} {modalContent && ( {modalContent} )} ); }; export default SyllableSpan;