glorious new db

1 files changed, 31 insertions, 12 deletions

diff --git a/src/components/Flashcard/ServerCard.tsx b/src/components/Flashcard/ServerCard.tsx
index d377dce..df37ba8 100644
--- a/src/components/Flashcard/ServerCard.tsx
+++ b/src/components/Flashcard/ServerCard.tsx
@@ -23,13 +23,21 @@ import {
   WordData,
 } from "@/zoom/logic/types";
 import { CardResponse } from "@/lib/types/cards";
-import { thaiData } from "@/pages/api/nlp";
+import { thaiData } from "@/lib/calls/nlp";
 import { getRandomHexColor } from "@/lib/utils";
 import { BookmarkIconito } from "./BookmarkButton";
+import SyllableSpan from "./SyllableSpan";
+import SyllableCard from "./Syllable";
 
-export async function CardFront({ data }: { data: CardResponse }) {
+export async function CardFront({
+  data,
+  needFetch = true,
+}: {
+  data: CardResponse;
+  needFetch?: boolean;
+}) {
   // const extraData = data.expression.lang
-  const extraData = await thaiData(data.expression.spelling);
+  const extraData = needFetch ? await thaiData(data.expression.spelling) : [];
   // console.log({ extraData });
 
   return (
@@ -42,15 +50,26 @@ export async function CardFront({ data }: { data: CardResponse }) {
         }
       >
         <p className="text-5xl cursor-pointer font-semibold text-slate-800 dark:text-slate-100 text-center">
-          {extraData[0]?.syllables.map((syl, i) => (
-            <span
-              key={syl + i}
-              style={{ color: getRandomHexColor() }}
-              className="m-1 hover:text-6xl"
-            >
-              {syl}
-            </span>
-          ))}
+          {needFetch ? (
+            extraData[0]?.syllables.map((syl, i) => (
+              // <span
+              //   key={syl + i}
+              //   style={{ color: getRandomHexColor() }}
+              //   className="m-1 hover:text-6xl"
+              // >
+              //   {syl}
+              // </span>
+              <SyllableSpan
+                key={syl + i}
+                spelling={syl}
+                lang={data.expression.lang}
+              />
+            ))
+          ) : (
+            <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>
+          )}
         </p>
       </Suspense>
       <IpaDisplay ipaEntries={data.expression.ipa} />