124 lines
3.8 KiB
TypeScript
124 lines
3.8 KiB
TypeScript
'use client';
|
||
|
||
import { useRouter } from 'next/navigation';
|
||
|
||
interface LearningCompleteProps {
|
||
score: {
|
||
correct: number;
|
||
total: number;
|
||
};
|
||
mode: string;
|
||
onRestart?: () => void;
|
||
onBackToDashboard?: () => void;
|
||
}
|
||
|
||
export default function LearningComplete({
|
||
score,
|
||
mode,
|
||
onRestart,
|
||
onBackToDashboard
|
||
}: LearningCompleteProps) {
|
||
const router = useRouter();
|
||
const percentage = score.total > 0 ? Math.round((score.correct / score.total) * 100) : 0;
|
||
|
||
const getGradeEmoji = (percentage: number) => {
|
||
if (percentage >= 90) return '🏆';
|
||
if (percentage >= 80) return '🎉';
|
||
if (percentage >= 70) return '👍';
|
||
if (percentage >= 60) return '😊';
|
||
return '💪';
|
||
};
|
||
|
||
const getGradeMessage = (percentage: number) => {
|
||
if (percentage >= 90) return '太棒了！你是學習高手！';
|
||
if (percentage >= 80) return '做得很好！繼續保持！';
|
||
if (percentage >= 70) return '不錯的表現！';
|
||
if (percentage >= 60) return '還不錯，繼續努力！';
|
||
return '加油！多練習會更好的！';
|
||
};
|
||
|
||
const getModeDisplayName = (mode: string) => {
|
||
switch (mode) {
|
||
case 'flip': return '翻卡模式';
|
||
case 'quiz': return '選擇題模式';
|
||
case 'fill': return '填空題模式';
|
||
case 'listening': return '聽力測試模式';
|
||
case 'speaking': return '口說練習模式';
|
||
default: return '學習模式';
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
|
||
<div className="bg-white rounded-2xl shadow-2xl max-w-md w-full p-8 text-center">
|
||
{/* Celebration Icon */}
|
||
<div className="text-6xl mb-4">
|
||
{getGradeEmoji(percentage)}
|
||
</div>
|
||
|
||
{/* Title */}
|
||
<h2 className="text-2xl font-bold text-gray-900 mb-2">
|
||
學習完成！
|
||
</h2>
|
||
|
||
{/* Mode */}
|
||
<div className="text-sm text-gray-600 mb-6">
|
||
{getModeDisplayName(mode)}
|
||
</div>
|
||
|
||
{/* Score Display */}
|
||
<div className="bg-gray-50 rounded-xl p-6 mb-6">
|
||
<div className="text-4xl font-bold text-blue-600 mb-2">
|
||
{percentage}%
|
||
</div>
|
||
<div className="text-gray-600 mb-3">
|
||
正確率
|
||
</div>
|
||
<div className="text-sm text-gray-500">
|
||
答對 <span className="font-semibold text-green-600">{score.correct}</span> 題，
|
||
共 <span className="font-semibold">{score.total}</span> 題
|
||
</div>
|
||
</div>
|
||
|
||
{/* Encouragement Message */}
|
||
<div className="text-gray-700 mb-8">
|
||
{getGradeMessage(percentage)}
|
||
</div>
|
||
|
||
{/* Action Buttons */}
|
||
<div className="space-y-3">
|
||
{onRestart && (
|
||
<button
|
||
onClick={onRestart}
|
||
className="w-full py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors"
|
||
>
|
||
再練習一次
|
||
</button>
|
||
)}
|
||
|
||
<button
|
||
onClick={() => {
|
||
onBackToDashboard?.();
|
||
router.push('/dashboard');
|
||
}}
|
||
className="w-full py-3 bg-gray-200 text-gray-700 rounded-lg font-medium hover:bg-gray-300 transition-colors"
|
||
>
|
||
回到首頁
|
||
</button>
|
||
|
||
<button
|
||
onClick={() => router.push('/flashcards')}
|
||
className="w-full py-3 border border-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-50 transition-colors"
|
||
>
|
||
管理詞卡
|
||
</button>
|
||
</div>
|
||
|
||
{/* Tips */}
|
||
<div className="mt-6 text-xs text-gray-500">
|
||
💡 提示：定期複習可以提高記憶效果
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
} |