1 files changed, 44 insertions, 0 deletions
diff --git a/src/components/Flashcard/Syllable.tsx b/src/components/Flashcard/Syllable.tsx
new file mode 100644
index 0000000..e470a4b
--- /dev/null
+++ b/src/components/Flashcard/Syllable.tsx
@@ -0,0 +1,44 @@
+"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 SyllableCard: React.FC<{ data: CardResponse }> = ({ data }) => {
+  return (
+    <div className="absolute w-full h-full bg-white dark:bg-slate-800 rounded-xl backface-hidden flex flex-col justify-center gap-8 items-center p-6">
+      <p className="text-5xl cursor-pointer hover:text-blue-700 font-semibold text-slate-800 dark:text-slate-100 text-center">
+        {data.expression.spelling}
+      </p>
+      <IpaDisplay ipaEntries={data.expression.ipa} />
+    </div>
+  );
+};
+
+export default SyllableCard;
+
+const IpaDisplay = ({
+  ipaEntries,
+}: {
+  ipaEntries: Array<{ ipa: string; tags?: string[] }>;
+}) => {
+  if (!ipaEntries || ipaEntries.length === 0) return null;
+  return (
+    <div className="flex items-center space-x-2 flex-wrap">
+      {ipaEntries.map((entry, index) => {
+        const tags = entry.tags ? entry.tags : [];
+        return (
+          <span key={index} className="text-lg text-blue-600 font-serif">
+            {entry.ipa}{" "}
+            {tags.length > 0 && (
+              <span className="text-xs text-gray-500">({tags.join(", ")})</span>
+            )}
+          </span>
+        );
+      })}
+    </div>
+  );
+};