44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
interface ProgressTrackerProps {
|
|
completedTests: number
|
|
totalTests: number
|
|
onShowTaskList: () => void
|
|
}
|
|
|
|
export const ProgressTracker: React.FC<ProgressTrackerProps> = ({
|
|
completedTests,
|
|
totalTests,
|
|
onShowTaskList
|
|
}) => {
|
|
const progressPercentage = totalTests > 0 ? (completedTests / totalTests) * 100 : 0
|
|
|
|
return (
|
|
<div className="mb-8">
|
|
<div className="flex justify-between items-center mb-3">
|
|
<span className="text-sm font-medium text-gray-900">學習進度</span>
|
|
<div className="flex items-center gap-6">
|
|
<button
|
|
onClick={onShowTaskList}
|
|
className="text-sm text-gray-600 hover:text-blue-600 transition-colors cursor-pointer flex items-center gap-1"
|
|
title="點擊查看詳細進度"
|
|
>
|
|
測驗: {completedTests}/{totalTests}
|
|
<span className="text-xs ml-1">📋</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className="w-full bg-gray-200 rounded-full h-3 cursor-pointer hover:bg-gray-300 transition-colors"
|
|
onClick={onShowTaskList}
|
|
title="點擊查看詳細進度"
|
|
>
|
|
<div
|
|
className="bg-blue-500 h-3 rounded-full transition-all hover:bg-blue-600"
|
|
style={{
|
|
width: `${progressPercentage}%`
|
|
}}
|
|
></div>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |