1 files changed, 64 insertions, 0 deletions
diff --git a/src/components/prosody/ClientCard.tsx b/src/components/prosody/ClientCard.tsx
new file mode 100644
index 0000000..795e3bf
--- /dev/null
+++ b/src/components/prosody/ClientCard.tsx
@@ -0,0 +1,64 @@
+"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<any[]>([]);
+  function showOnset(e: React.MouseEvent) {
+    e.stopPropagation();
+    console.log(syl);
+    startTransition(async () => {
+      const data = await getOnsets(syl.onset);
+      setData(data);
+    });
+  }
+  console.log({ isPending });
+  return (
+    <div>
+      <div>whole: {syl.ipa}</div>
+      <div
+        onClick={showOnset}
+        className="text-blue-500 hover:text-blue-700 hover:underline"
+      >
+        onset: {syl.onset}
+      </div>
+      <div
+        onClick={showOnset}
+        className="text-blue-500 hover:text-blue-700 hover:underline"
+      >
+        nucleus: {syl.nucleus}
+      </div>
+      <div
+        onClick={showOnset}
+        className="text-blue-500 hover:text-blue-700 hover:underline"
+      >
+        coda: {syl.coda}
+      </div>
+      <div
+        onClick={showOnset}
+        className="text-blue-500 hover:text-blue-700 hover:underline"
+      >
+        tone: {syl.tone}
+      </div>
+      <div
+        onClick={showOnset}
+        className="text-blue-500 hover:text-blue-700 hover:underline"
+      >
+        tonename: {syl.tonen}
+      </div>
+      {data.length > 0 && (
+        <div>
+          {data.map((d) => (
+            <div key={d.id}>
+              <div>{d.spelling}</div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Component for displaying examples