From 2401217a4019938d1c1cc61b6e33ccb233eb6e74 Mon Sep 17 00:00:00 2001 From: polwex Date: Tue, 3 Jun 2025 09:34:29 +0700 Subject: this is golden thanks claude --- src/components/Flashcard/Deck3.tsx | 223 +++++++++++++++++++ src/components/Flashcard/ServerCard2.tsx | 359 +++++++++++++++++++++++++++++++ src/components/prosody/ClientCard.tsx | 64 ++++++ src/components/prosody/ServerCard.tsx | 343 +++++++++++++++++++++++++++++ 4 files changed, 989 insertions(+) create mode 100644 src/components/Flashcard/Deck3.tsx create mode 100644 src/components/Flashcard/ServerCard2.tsx create mode 100644 src/components/prosody/ClientCard.tsx create mode 100644 src/components/prosody/ServerCard.tsx (limited to 'src/components') diff --git a/src/components/Flashcard/Deck3.tsx b/src/components/Flashcard/Deck3.tsx new file mode 100644 index 0000000..4f0f711 --- /dev/null +++ b/src/components/Flashcard/Deck3.tsx @@ -0,0 +1,223 @@ +"use client"; + +import { CardResponse, DeckResponse } from "@/lib/types/cards"; +import React, { + ReactNode, + useCallback, + useEffect, + useState, + useTransition, +} from "react"; +import { Button } from "../ui/button"; +import { ChevronLeftIcon, ChevronRightIcon, RotateCcwIcon } from "lucide-react"; +import "./cards.css"; + +type CardData = { + id: number; + front: ReactNode; + back: ReactNode; +}; +// --- Main App Component --- +function Deck({ data, cards }: { data: any; cards: CardData[] }) { + const [currentPage, setCurrentPage] = useState(0); + const [currentIndex, setCurrentIndex] = useState(0); + const [isFlipped, setIsFlipped] = useState(false); + const [animationDirection, setAnimationDirection] = useState< + "enter-left" | "enter-right" | "exit-left" | "exit-right" | "none" + >("none"); + const [isAnimating, setIsAnimating] = useState(false); + + const handleFlip = () => { + if (isAnimating) return; + setIsFlipped(!isFlipped); + }; + + const handleNext = useCallback(() => { + if (isAnimating || currentIndex >= cards.length - 1) return; + setIsAnimating(true); + setIsFlipped(false); // Flip back to front before changing card + setAnimationDirection("exit-left"); + + setTimeout(() => { + setCurrentIndex((prevIndex) => Math.min(prevIndex + 1, cards.length - 1)); + setAnimationDirection("enter-right"); + setTimeout(() => { + setAnimationDirection("none"); + setIsAnimating(false); + }, 200); // Duration of enter animation + }, 200); // Duration of exit animation + }, [currentIndex, cards.length, isAnimating]); + + const handlePrev = useCallback(() => { + if (isAnimating || currentIndex <= 0) return; + setIsAnimating(true); + setIsFlipped(false); // Flip back to front + setAnimationDirection("exit-right"); + + setTimeout(() => { + setCurrentIndex((prevIndex) => Math.max(prevIndex - 1, 0)); + setAnimationDirection("enter-left"); + setTimeout(() => { + setAnimationDirection("none"); + setIsAnimating(false); + }, 200); // Duration of enter animation + }, 200); // Duration of exit animation + }, [currentIndex, isAnimating]); + + // Keyboard navigation + useEffect(() => { + const handleKeyDown = (event: KeyboardEvent) => { + if (isAnimating) return; + if (event.key === "ArrowRight") { + handleNext(); + } else if (event.key === "ArrowLeft") { + handlePrev(); + } else if (event.key === " " || event.key === "Enter") { + // Space or Enter to flip + event.preventDefault(); // Prevent scrolling if space is pressed + handleFlip(); + } + }; + + window.addEventListener("keydown", handleKeyDown); + return () => { + window.removeEventListener("keydown", handleKeyDown); + }; + }, [handleNext, handlePrev, isAnimating]); + + const [isPending, startTransition] = useTransition(); + const shuffle = () => { + startTransition(async () => { + "use server"; + console.log("shuffling deck..."); + }); + }; + + if (cards.length === 0) { + return ( +
+

No flashcards available.

+
+ ); + } + + const currentCard = cards[currentIndex]; + if (!currentCard) return

wtf

; + + return ( +
+
+

Deck: {data.lesson.name}

+

{data.lesson.description}

+
+
+ {/* This div is for positioning the card and managing overflow during animations */} +
+ +
+
+ +
+ +
+

+ Card {currentIndex + 1} of {cards.length} +

+ +
+ +
+ +
+ Use Arrow Keys (← →) to navigate, Space/Enter to flip. +
+ +
+ ); +} + +export default Deck; + +interface FlashcardProps { + isFlipped: boolean; + onFlip: () => void; + animationDirection: + | "enter-left" + | "enter-right" + | "exit-left" + | "exit-right" + | "none"; +} +interface ServerCards { + front: ReactNode; + back: ReactNode; +} + +function FlashCard({ + isFlipped, + onFlip, + animationDirection, + front, + back, +}: FlashcardProps & ServerCards) { + const getAnimationClass = () => { + switch (animationDirection) { + case "enter-right": + return "animate-slide-in-right"; + case "enter-left": + return "animate-slide-in-left"; + case "exit-right": + return "animate-slide-out-right"; + case "exit-left": + return "animate-slide-out-left"; + default: + return ""; + } + }; + return ( +
+
+ {front} + {back} +
+
+ ); +} diff --git a/src/components/Flashcard/ServerCard2.tsx b/src/components/Flashcard/ServerCard2.tsx new file mode 100644 index 0000000..d8a4989 --- /dev/null +++ b/src/components/Flashcard/ServerCard2.tsx @@ -0,0 +1,359 @@ +// 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 "./BookmarkButton"; +import SyllableSpan from "./SyllableSpan"; +import SyllableCard from "./Syllable"; + +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) => ( +
+
whole: {syl.ipa}
+
+ onset: {syl.onset} +
+
+ nucleus: {syl.nucleus} +
+
+ coda: {syl.coda} +
+
+ tone: {syl.tone} +
+
+ tonename: {syl.tonen} +
+
+ ))} + +

+ {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: +

+ + + + +
+ )} +
+ ); +}; diff --git a/src/components/prosody/ClientCard.tsx b/src/components/prosody/ClientCard.tsx new file mode 100644 index 0000000..795e3bf --- /dev/null +++ b/src/components/prosody/ClientCard.tsx @@ -0,0 +1,64 @@ +"use client"; +import { getOnsets } from "@/actions/prosody"; +import type { ProsodySyllable, ProsodyWord } from "@/lib/types/cards"; +import { useTransition, useState } from "react"; + +export async function SyllableBreakdown({ syl }: { syl: ProsodySyllable }) { + const [isPending, startTransition] = useTransition(); + const [data, setData] = useState([]); + function showOnset(e: React.MouseEvent) { + e.stopPropagation(); + console.log(syl); + startTransition(async () => { + const data = await getOnsets(syl.onset); + setData(data); + }); + } + console.log({ isPending }); + return ( +
+
whole: {syl.ipa}
+
+ onset: {syl.onset} +
+
+ nucleus: {syl.nucleus} +
+
+ coda: {syl.coda} +
+
+ tone: {syl.tone} +
+
+ tonename: {syl.tonen} +
+ {data.length > 0 && ( +
+ {data.map((d) => ( +
+
{d.spelling}
+
+ ))} +
+ )} +
+ ); +} + +// Component for displaying examples diff --git a/src/components/prosody/ServerCard.tsx b/src/components/prosody/ServerCard.tsx new file mode 100644 index 0000000..4867721 --- /dev/null +++ b/src/components/prosody/ServerCard.tsx @@ -0,0 +1,343 @@ +// 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: +

+ + + + +
+ )} +
+ ); +}; -- cgit v1.2.3