// This is a Server Component
import React, { Suspense, useTransition } from "react";
import { NLP } from "sortug-ai";
import {
BookOpen,
Volume2,
Link as LinkIcon,
ChevronDown,
ChevronUp,
Search,
Info,
MessageSquareQuote,
Tags,
ListTree,
Lightbulb,
BookmarkIcon,
} from "lucide-react";
import {
Example,
SubSense,
RelatedEntry,
Sense,
WordData,
} from "@/zoom/logic/types";
import { CardResponse, ProsodyWord } from "@/lib/types/cards";
import { thaiData } from "@/lib/calls/nlp";
import { getRandomHexColor } from "@/lib/utils";
import { BookmarkIconito } from "../Flashcard/BookmarkButton";
import SyllableCard from "../Flashcard/Syllable";
import SyllableSpan from "../Flashcard/SyllableSpan";
import { SyllableBreakdown } from "./ClientCard";
export async function CardFront({ data }: { data: ProsodyWord }) {
console.log("cardfront", data);
return (
{data.spelling}
}
>
{data.syllables.map((syl, i) => (
//
// {syl}
//
))}
Word: {data.id}
);
}
// Helper component for IPA display
export const IpaDisplay = ({
ipaEntries,
}: {
ipaEntries: Array<{ ipa: string; tags?: string[] }>;
}) => {
if (!ipaEntries || ipaEntries.length === 0) return null;
return (
{ipaEntries.map((entry, index) => {
const tags = entry.tags ? entry.tags : [];
return (
{entry.ipa}{" "}
{tags.length > 0 && (
({tags.join(", ")})
)}
);
})}
);
};
export async function CardBack({ data }: { data: ProsodyWord }) {
return (
{data.syllables.map((syl, i) => (
))}
{data.notes || ""}
);
}
// Component for displaying examples
const ExampleDisplay = ({ examples }: { examples: Example[] }) => {
if (!examples || examples.length === 0) return null;
return (
Examples:
{examples.map((ex, idx) => (
-
"{ex.text}"
{ex.ref && (
({ex.ref})
)}
{ex.type !== "quote" && (
{ex.type}
)}
))}
);
};
// Component for displaying related terms (synonyms, antonyms, etc.)
const RelatedTermsDisplay = ({
terms,
type,
}: {
terms: RelatedEntry[] | undefined;
type: string;
}) => {
if (!terms || terms.length === 0) return null;
return (
{type}:{" "}
{terms.map((term, idx) => (
{term.word}
{/*term.source && (
({term.source})
)*/}
{idx < terms.length - 1 && ", "}
))}
);
};
// Component for displaying a SubSense
const SubSenseDisplay = ({
subSense,
subSenseNumber,
}: {
subSense: SubSense;
subSenseNumber: number;
}) => {
return (
{subSense.glosses.map((gloss, glossIdx) => (
{subSenseNumber}.{glossIdx + 1}
{" "}
{gloss}
))}
{subSense.raw_glosses &&
subSense.raw_glosses.length > 0 &&
subSense.raw_glosses.join("") !== subSense.glosses.join("") && (
(Raw: {subSense.raw_glosses.join("; ")})
)}
{subSense.categories && subSense.categories.length > 0 && (
Categories:
{subSense.categories.map((cat, idx) => (
{cat}
))}
)}
{subSense.tags && subSense.tags.length > 0 && (
Tags:
{subSense.tags.map((tag, idx) => (
{tag}
))}
)}
{subSense.links && subSense.links.length > 0 && (
{subSense.links.map(([type, target], linkIdx) => (
{type}
))}
)}
);
};
// Component for individual sense
const SenseCard = ({
senseData,
senseNumber,
}: {
senseData: Sense;
senseNumber: number;
}) => {
return (
{senseNumber}. {NLP.unpackPos(senseData.pos)}
{senseData.etymology && (
Etymology
{senseData.etymology}
)}
{senseData.forms && senseData.forms.length > 0 && (
Forms:
{senseData.forms.map((form, idx) => (
{form.form}{" "}
{form.tags.length > 0 && `(${form.tags.join(", ")})`}
))}
)}
{senseData.senses.map((subSense, idx) => (
))}
{senseData.related && (
Related Terms:
)}
);
};