// 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:
); }; // 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:

)}
); };