67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
import React from 'react'
|
|
|
|
interface ProgressBarProps {
|
|
current: number
|
|
total: number
|
|
correct: number
|
|
incorrect: number
|
|
skipped: number
|
|
className?: string
|
|
}
|
|
|
|
export const ProgressBar: React.FC<ProgressBarProps> = ({
|
|
current,
|
|
total,
|
|
correct,
|
|
incorrect,
|
|
skipped,
|
|
className = ''
|
|
}) => {
|
|
const percentage = total > 0 ? Math.round((current / total) * 100) : 0
|
|
const completed = correct + incorrect + skipped
|
|
|
|
return (
|
|
<div className={`bg-white rounded-lg shadow p-4 ${className}`}>
|
|
<div className="flex justify-between items-center mb-2">
|
|
<h3 className="font-medium text-gray-900">複習進度</h3>
|
|
<span className="text-sm text-gray-600">
|
|
{current + 1} / {total}
|
|
</span>
|
|
</div>
|
|
|
|
{/* 進度條 */}
|
|
<div className="w-full bg-gray-200 rounded-full h-2 mb-3">
|
|
<div
|
|
className="bg-blue-600 h-2 rounded-full transition-all duration-300"
|
|
style={{ width: `${percentage}%` }}
|
|
/>
|
|
</div>
|
|
|
|
{/* 統計信息 */}
|
|
<div className="grid grid-cols-4 gap-2 text-xs">
|
|
<div className="text-center">
|
|
<div className="font-semibold text-green-600">{correct}</div>
|
|
<div className="text-gray-500">正確</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="font-semibold text-red-600">{incorrect}</div>
|
|
<div className="text-gray-500">錯誤</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="font-semibold text-yellow-600">{skipped}</div>
|
|
<div className="text-gray-500">跳過</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="font-semibold text-gray-600">{total - completed}</div>
|
|
<div className="text-gray-500">待完成</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 百分比顯示 */}
|
|
<div className="mt-3 text-center">
|
|
<span className="text-lg font-semibold text-blue-600">{percentage}%</span>
|
|
<span className="text-sm text-gray-500 ml-1">已完成</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |