1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
|
import React, { useCallback, useEffect, useState } from "react";
import spinner from "../assets/icons/spinner.svg";
import likeIcon from "../assets/icons/heart.svg";
import commentsIcon from "../assets/icons/quote.svg";
import shareIcon from "../assets/icons/share.svg";
import fontIcon from "../assets/icons/font.svg";
import bookmarkIcon from "@/assets/icons/bookmark.svg";
import speakerIcon from "@/assets/icons/speaker.svg";
import type { AnalyzeRes, ColorTheme, Meaning } from "@/logic/types";
import { ColoredText } from "../Sentence.tsx";
import { P, Span, useSpeechSynthesis } from "@/hooks/useLang.tsx";
import type { FullWordData } from "@sortug/langlib";
import { cycleNext } from "@sortug/lib";
import FontChanger from "@/fonts/FontChanger.tsx";
import Phonetic from "./Phonetic.tsx";
function Word({
data,
lang,
theme,
}: {
data: FullWordData;
lang: string;
theme: ColorTheme;
}) {
async function load() {
// const wiki = await fetchWiki(data.word);
// console.log(wiki, "wiki res");
// if ("ok" in wiki) setM(wiki.ok.meanings);
// else setError(wiki.error);
// setLoading(false);
}
useEffect(() => {
load();
}, []);
const [error, setError] = useState("");
const [loading, setLoading] = useState(false);
const [meanings, setM] = useState<Meaning[]>([]);
const [fontIdx, setFont] = useState(0);
const { voices, speaking, speak, stop } = useSpeechSynthesis();
function playAudio() {
console.log({ voices, speaking });
console.log("word", data);
speak(data.spelling);
}
console.log({ data });
async function saveW() {}
return (
<div id="word-modal" title={data.spelling}>
<FontChanger text={data.spelling}>
<img className="save-icon cp" onClick={saveW} src={bookmarkIcon} />
<div className="original">
<ColoredText
frags={data.phonetic.syllables.map((s) => ({
data: s,
display: s.spelling,
colorBy: s.tone.name,
}))}
theme={theme}
/>
</div>
<Phonetic data={data} lang={lang} theme={theme} />
<div className="pronunciation IPA flex1 flex-center">
<P>{data.phonetic.ipa}</P>
<img onClick={playAudio} className="icon cp" src={speakerIcon} />
</div>
<div className="meanings">
{loading ? (
<img src={spinner} className="spinner bc" />
) : (
data.senses.map((m) => (
<div key={JSON.stringify(m)} className="meaning">
<div className="pos">
<Span>{m.pos}</Span>
</div>
<ol>
{m.glosses.map((t, i) => (
<li key={t + i} className="translation">
<P>{t}</P>
</li>
))}
</ol>
</div>
))
)}
{error && <div className="error">{error}</div>}
</div>
</FontChanger>
</div>
);
}
export default Word;
<Card className="absolute inset-0 backface-hidden rotate-y-180 flex flex-col overflow-hidden border-slate-200 dark:border-slate-800 shadow-lg bg-slate-50/50">
<div className="flex-1 overflow-hidden flex flex-col">
<Tabs defaultValue="meanings" className="flex-1 flex flex-col">
<div className="px-6 pt-6 pb-2 bg-white border-b">
<TabsList className="grid w-full grid-cols-3">
<TabsTrigger value="meanings">Meanings</TabsTrigger>
<TabsTrigger value="grammar">Grammar</TabsTrigger>
<TabsTrigger value="examples">Examples</TabsTrigger>
</TabsList>
</div>
<div className="flex-1 overflow-y-auto p-6">
<TabsContent value="meanings" className="mt-0 space-y-4">
<EnhancedWordMeanings word={word} />
</TabsContent>
<TabsContent value="grammar" className="mt-0 space-y-6">
<div className="space-y-4">
<div className="bg-blue-50 p-4 rounded-lg border border-blue-100">
<h3 className="font-semibold text-blue-900 mb-2">
Tone Analysis
</h3>
<div className="flex flex-wrap gap-2">
{tones.map((tone, idx) => (
<Badge key={idx} variant="outline" className="bg-white">
Syl {idx + 1}:{" "}
<span
className={cn("ml-1 font-bold", getColorByTone(tone))}
>
{tone}
</span>
</Badge>
))}
</div>
</div>
<div className="bg-slate-100 p-4 rounded-lg border border-slate-200">
<h3 className="font-semibold text-slate-900 mb-2">
Word Structure
</h3>
<p className="text-sm text-slate-600">
This word consists of {syls.length} syllable
{syls.length > 1 ? "s" : ""}. The tone pattern is essential for
conveying the correct meaning.
</p>
</div>
</div>
</TabsContent>
<TabsContent value="examples" className="mt-0 space-y-4">
<ExamplesTab
word={word}
moreExamples={word.senses?.flatMap((s) => s.examples || [])}
/>
</TabsContent>
</div>
</Tabs>
</div>
</Card>;
|
