82 lines
2.7 KiB
TypeScript
82 lines
2.7 KiB
TypeScript
'use client'
|
||
|
||
import { ClickableText } from '@/components/ClickableText'
|
||
|
||
const mockAnalysis = {
|
||
"brought": {
|
||
word: "brought",
|
||
translation: "帶來、提出",
|
||
definition: "Past tense of bring; to take or carry something to a place",
|
||
partOfSpeech: "verb",
|
||
pronunciation: "/brɔːt/",
|
||
synonyms: ["carried", "took", "delivered"],
|
||
isPhrase: true,
|
||
phraseInfo: {
|
||
phrase: "bring up",
|
||
meaning: "提出（話題）、養育",
|
||
warning: "在這個句子中，\"brought up\" 是一個片語，意思是\"提出話題\"，而不是單純的\"帶來\""
|
||
}
|
||
},
|
||
"this": {
|
||
word: "this",
|
||
translation: "這個",
|
||
definition: "Used to indicate something near or just mentioned",
|
||
partOfSpeech: "pronoun",
|
||
pronunciation: "/ðɪs/",
|
||
synonyms: ["that", "it"],
|
||
isPhrase: false
|
||
},
|
||
"thing": {
|
||
word: "thing",
|
||
translation: "事情、東西",
|
||
definition: "An object, fact, or situation",
|
||
partOfSpeech: "noun",
|
||
pronunciation: "/θɪŋ/",
|
||
synonyms: ["object", "matter", "item"],
|
||
isPhrase: false
|
||
},
|
||
"up": {
|
||
word: "up",
|
||
translation: "向上",
|
||
definition: "Toward a higher place or position",
|
||
partOfSpeech: "adverb",
|
||
pronunciation: "/ʌp/",
|
||
synonyms: ["upward", "above"],
|
||
isPhrase: true,
|
||
phraseInfo: {
|
||
phrase: "bring up",
|
||
meaning: "提出（話題）、養育",
|
||
warning: "\"up\" 在這裡是片語 \"bring up\" 的一部分，不是單獨的\"向上\"的意思"
|
||
}
|
||
}
|
||
}
|
||
|
||
export default function TestPage() {
|
||
return (
|
||
<div className="min-h-screen bg-gray-50 p-8">
|
||
<div className="max-w-4xl mx-auto">
|
||
<h1 className="text-3xl font-bold mb-8">互動式單字查詢測試</h1>
|
||
|
||
<div className="bg-white rounded-xl shadow-sm p-6">
|
||
<h2 className="text-lg font-semibold mb-4">點擊查詢單字意思</h2>
|
||
<div className="p-4 bg-blue-50 rounded-lg border-l-4 border-blue-400 mb-4">
|
||
<p className="text-sm text-blue-800">
|
||
💡 <strong>使用說明：</strong>點擊下方句子中的任何單字，可以立即查看詳細意思。
|
||
黃色背景表示該單字屬於片語或俚語，會優先顯示片語意思。
|
||
</p>
|
||
</div>
|
||
|
||
<div className="p-6 bg-gray-50 rounded-lg border-2 border-dashed border-gray-300">
|
||
<ClickableText
|
||
text="He brought this thing up during our meeting."
|
||
analysis={mockAnalysis}
|
||
onWordClick={(word, analysis) => {
|
||
console.log('Clicked word:', word, analysis)
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
} |