"use client"; import { getOnsets } from "@/actions/prosody"; import type { ProsodySyllable, ProsodyWord } from "@/lib/types/cards"; import { useTransition, useState } from "react"; export async function SyllableBreakdown({ syl }: { syl: ProsodySyllable }) { const [isPending, startTransition] = useTransition(); const [data, setData] = useState([]); function showOnset(e: React.MouseEvent) { e.stopPropagation(); console.log(syl); startTransition(async () => { const data = await getOnsets(syl.onset); setData(data); }); } console.log({ isPending }); return (
whole: {syl.ipa}
onset: {syl.onset}
nucleus: {syl.nucleus}
coda: {syl.coda}
tone: {syl.tone}
tonename: {syl.tonen}
{data.length > 0 && (
{data.map((d) => (
{d.spelling}
))}
)}
); } // Component for displaying examples