70 lines
1.9 KiB
TypeScript
70 lines
1.9 KiB
TypeScript
import React, { memo } from 'react'
|
||
import AudioPlayer from '@/components/AudioPlayer'
|
||
|
||
interface TestResultDisplayProps {
|
||
isCorrect: boolean
|
||
correctAnswer: string
|
||
userAnswer?: string
|
||
word: string
|
||
pronunciation?: string
|
||
example: string
|
||
exampleTranslation: string
|
||
showResult: boolean
|
||
}
|
||
|
||
export const TestResultDisplay = memo<TestResultDisplayProps>(({
|
||
isCorrect,
|
||
correctAnswer,
|
||
userAnswer,
|
||
word,
|
||
pronunciation,
|
||
example,
|
||
exampleTranslation,
|
||
showResult
|
||
}) => {
|
||
if (!showResult) return null
|
||
|
||
return (
|
||
<div className={`mt-6 p-6 rounded-lg w-full ${
|
||
isCorrect
|
||
? 'bg-green-50 border border-green-200'
|
||
: 'bg-red-50 border border-red-200'
|
||
}`}>
|
||
<p className={`font-semibold text-left text-xl mb-4 ${
|
||
isCorrect ? 'text-green-700' : 'text-red-700'
|
||
}`}>
|
||
{isCorrect ? '正確！' : '錯誤！'}
|
||
</p>
|
||
|
||
{!isCorrect && userAnswer && (
|
||
<div className="mb-4">
|
||
<p className="text-gray-700 text-left">
|
||
正確答案是：<strong className="text-lg">{correctAnswer}</strong>
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
<div className="space-y-3">
|
||
<div className="text-left">
|
||
<p className="text-gray-600">
|
||
{word && <span className="font-semibold text-left text-xl">{word}</span>}
|
||
{pronunciation && <span className="mx-2">{pronunciation}</span>}
|
||
<AudioPlayer text={correctAnswer} />
|
||
</p>
|
||
</div>
|
||
|
||
<div className="text-left">
|
||
<p className="text-gray-600">
|
||
{example}
|
||
<AudioPlayer text={example} />
|
||
</p>
|
||
<p className="text-gray-500 text-sm">
|
||
{exampleTranslation}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
})
|
||
|
||
TestResultDisplay.displayName = 'TestResultDisplay' |