88 lines
3.2 KiB
TypeScript
88 lines
3.2 KiB
TypeScript
interface SimpleResultsProps {
|
||
score: { correct: number; total: number }
|
||
totalCards: number
|
||
onRestart: () => void
|
||
}
|
||
|
||
export function QuizResult({ score, totalCards, onRestart }: SimpleResultsProps) {
|
||
const accuracy = Math.round((score.correct / score.total) * 100)
|
||
|
||
const getPerformanceMessage = () => {
|
||
if (accuracy >= 80) return { text: '太棒了！', emoji: '🎉', color: 'text-green-600' }
|
||
if (accuracy >= 60) return { text: '不錯！', emoji: '👍', color: 'text-blue-600' }
|
||
if (accuracy >= 40) return { text: '繼續努力！', emoji: '💪', color: 'text-yellow-600' }
|
||
return { text: '加油！', emoji: '🌟', color: 'text-orange-600' }
|
||
}
|
||
|
||
const performance = getPerformanceMessage()
|
||
|
||
return (
|
||
<div className="max-w-md mx-auto text-center">
|
||
<div className="bg-white rounded-xl shadow-lg p-8">
|
||
{/* 完成慶祝 */}
|
||
<div className="text-6xl mb-4">{performance.emoji}</div>
|
||
|
||
<h1 className="text-2xl font-bold text-gray-900 mb-2">
|
||
複習完成！
|
||
</h1>
|
||
|
||
<p className={`text-xl font-semibold mb-6 ${performance.color}`}>
|
||
{performance.text}
|
||
</p>
|
||
|
||
{/* 詳細統計 */}
|
||
<div className="grid grid-cols-3 gap-4 mb-6">
|
||
<div className="bg-gray-50 rounded-lg p-4">
|
||
<div className="text-2xl font-bold text-gray-900">{totalCards}</div>
|
||
<div className="text-sm text-gray-600">總詞卡數</div>
|
||
</div>
|
||
|
||
<div className="bg-green-50 rounded-lg p-4">
|
||
<div className="text-2xl font-bold text-green-600">{score.correct}</div>
|
||
<div className="text-sm text-green-600">答對數</div>
|
||
</div>
|
||
|
||
<div className="bg-blue-50 rounded-lg p-4">
|
||
<div className="text-2xl font-bold text-blue-600">{accuracy}%</div>
|
||
<div className="text-sm text-blue-600">準確率</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 鼓勵訊息 */}
|
||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
|
||
<p className="text-blue-800 text-sm">
|
||
{accuracy >= 80
|
||
? "您對這些詞彙掌握得很好！繼續保持！"
|
||
: accuracy >= 60
|
||
? "表現不錯！多複習幾次會更熟練。"
|
||
: "學習是個過程，多練習就會進步！"}
|
||
</p>
|
||
</div>
|
||
|
||
{/* 操作按鈕 */}
|
||
<div className="space-y-3">
|
||
<button
|
||
onClick={onRestart}
|
||
className="w-full bg-blue-600 text-white py-3 px-6 rounded-lg font-medium hover:bg-blue-700 transition-colors"
|
||
>
|
||
再次複習
|
||
</button>
|
||
|
||
<a
|
||
href="/flashcards"
|
||
className="block w-full border border-gray-300 text-gray-700 py-3 px-6 rounded-lg font-medium hover:bg-gray-50 transition-colors"
|
||
>
|
||
管理詞卡
|
||
</a>
|
||
|
||
<a
|
||
href="/dashboard"
|
||
className="block w-full text-gray-500 py-2 px-6 rounded-lg hover:bg-gray-50 transition-colors"
|
||
>
|
||
回到主頁
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
} |