glorious new db

3 files changed, 95 insertions, 3 deletions

diff --git a/src/zoom/ServerSyllable.tsx b/src/zoom/ServerSyllable.tsx
new file mode 100644
index 0000000..907b956
--- /dev/null
+++ b/src/zoom/ServerSyllable.tsx
@@ -0,0 +1,84 @@
+// This is a Server Component
+import React, { Suspense } from "react";
+import db from "@/lib/db";
+import {
+  Card,
+  CardHeader,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  CardTitle,
+} from "@/components/ui/card";
+import { NLP } from "sortug-ai";
+import { Volume2, Link as LinkIcon } from "lucide-react";
+import { isTonal } from "@/lib/lang/utils";
+import { CardResponse, SyllableToken } from "@/lib/types/cards";
+import { deconstructSyllable } from "@/lib/calls/nlp";
+
+export default async function (props: { data: CardResponse }) {
+  const { expression } = props.data;
+  const { result } = await deconstructSyllable(expression.spelling);
+
+  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">
+        {expression.spelling}
+      </p>
+      <Suspense fallback={<IpaDisplay ipaEntries={expression.ipa} />}>
+        <Deconstructed syl={result} />
+      </Suspense>
+    </div>
+  );
+}
+
+function Deconstructed({ syl }: { syl: SyllableToken[] }) {
+  return (
+    <div>
+      {syl.map((tok) => (
+        <span></span>
+      ))}
+    </div>
+  );
+}
+
+// Helper component for IPA display
+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>
+        );
+      })}
+      <button
+        className="p-1 text-blue-500 hover:text-blue-700 transition-colors"
+        title="Pronounce"
+        // onClick={() => {
+        //   /* Pronunciation logic would be client-side or a server roundtrip for audio file. */ alert(
+        //     "Pronunciation feature not implemented for server component.",
+        //   );
+        // }}
+      >
+        <Volume2 size={20} />
+      </button>
+    </div>
+  );
+};
+
+function Tones({ text, lang }: WordProps) {
+  return <div></div>;
+}
+function NotTones({ text, lang }: WordProps) {
+  return <div></div>;
+}
diff --git a/src/zoom/ServerWord.tsx b/src/zoom/ServerWord.tsx
index 75b631d..712efb6 100644
--- a/src/zoom/ServerWord.tsx
+++ b/src/zoom/ServerWord.tsx
@@ -38,7 +38,7 @@ export default async function Wordd({
   word: string;
   lang: string;
 }) {
-  const data = db.fetchWordBySpelling(word, "en");
+  const data = db.fetchWordBySpelling(word, lang);
 
   if (!data) return <p>oh...</p>;
   console.log(data.senses[0]);
diff --git a/src/zoom/logic/types.ts b/src/zoom/logic/types.ts
index 1342bc7..48c505e 100644
--- a/src/zoom/logic/types.ts
+++ b/src/zoom/logic/types.ts
@@ -52,10 +52,18 @@ export type WordData = {
   type: ExpressionType;
   syllables: number;
   lang: string;
-  prosody: Prosody;
+  prosody: Prosody; // This will be SyllableProsody[]
   senses: Sense[];
 };
-export type Prosody = { stressedSyllable: number; rhyme: string };
+
+export type SyllableProsody = {
+  tone: number | null; // Tone for the syllable
+  ipa?: string;         // IPA for the syllable
+  // Add other syllable-specific prosodic features if needed
+};
+
+export type Prosody = SyllableProsody[];
+
 export type ExpressionType = "word" | "expression" | "syllable";
 export type Sense = {
   etymology: string;