61 lines
2.2 KiB
TypeScript
61 lines
2.2 KiB
TypeScript
import { ConfidenceLevel } from '@/types/review'
|
||
|
||
interface ConfidenceButtonsProps {
|
||
selectedLevel?: ConfidenceLevel | undefined
|
||
onSelect: (level: ConfidenceLevel) => void
|
||
disabled?: boolean
|
||
className?: string
|
||
}
|
||
|
||
export const ConfidenceButtons: React.FC<ConfidenceButtonsProps> = ({
|
||
selectedLevel,
|
||
onSelect,
|
||
disabled = false,
|
||
className = ''
|
||
}) => {
|
||
const confidenceLevels: { level: ConfidenceLevel; label: string; color: string }[] = [
|
||
{ level: 1, label: '完全不會', color: 'bg-red-500 hover:bg-red-600' },
|
||
{ level: 2, label: '不太會', color: 'bg-orange-500 hover:bg-orange-600' },
|
||
{ level: 3, label: '一般', color: 'bg-yellow-500 hover:bg-yellow-600' },
|
||
{ level: 4, label: '還算會', color: 'bg-blue-500 hover:bg-blue-600' },
|
||
{ level: 5, label: '非常熟悉', color: 'bg-green-500 hover:bg-green-600' }
|
||
]
|
||
|
||
return (
|
||
<div className={`space-y-4 ${className}`}>
|
||
<h3 className="text-lg font-medium text-gray-900 text-center">
|
||
對這個單字的熟悉程度如何？
|
||
</h3>
|
||
|
||
<div className="grid grid-cols-1 sm:grid-cols-5 gap-3">
|
||
{confidenceLevels.map(({ level, label, color }) => (
|
||
<button
|
||
key={level}
|
||
onClick={() => onSelect(level)}
|
||
disabled={disabled}
|
||
className={`
|
||
px-4 py-3 rounded-lg text-white font-medium text-sm
|
||
transition-all duration-200 transform
|
||
${selectedLevel === level
|
||
? `${color} ring-2 ring-offset-2 ring-gray-400 scale-105`
|
||
: `${color} hover:scale-105`
|
||
}
|
||
${disabled ? 'opacity-50 cursor-not-allowed' : 'hover:shadow-lg active:scale-95'}
|
||
`}
|
||
>
|
||
<div className="text-center">
|
||
<div className="text-lg font-bold">{level}</div>
|
||
<div className="text-xs">{label}</div>
|
||
</div>
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{selectedLevel && (
|
||
<p className="text-center text-sm text-gray-600">
|
||
已選擇: {confidenceLevels.find(c => c.level === selectedLevel)?.label}
|
||
</p>
|
||
)}
|
||
</div>
|
||
)
|
||
} |