71 lines
2.4 KiB
TypeScript
71 lines
2.4 KiB
TypeScript
import React, { memo, useCallback } from 'react'
|
||
|
||
interface ConfidenceButtonsProps {
|
||
selectedLevel: number | null
|
||
onSelect: (level: number) => void
|
||
disabled?: boolean
|
||
className?: string
|
||
}
|
||
|
||
const confidenceConfig = {
|
||
1: { label: '完全不懂', color: 'bg-red-100 text-red-700 border-red-200 hover:bg-red-200' },
|
||
2: { label: '模糊', color: 'bg-orange-100 text-orange-700 border-orange-200 hover:bg-orange-200' },
|
||
3: { label: '一般', color: 'bg-yellow-100 text-yellow-700 border-yellow-200 hover:bg-yellow-200' },
|
||
4: { label: '熟悉', color: 'bg-blue-100 text-blue-700 border-blue-200 hover:bg-blue-200' },
|
||
5: { label: '非常熟悉', color: 'bg-green-100 text-green-700 border-green-200 hover:bg-green-200' }
|
||
}
|
||
|
||
export const ConfidenceButtons = memo<ConfidenceButtonsProps>(({
|
||
selectedLevel,
|
||
onSelect,
|
||
disabled = false,
|
||
className = ''
|
||
}) => {
|
||
const handleSelect = useCallback((level: number) => {
|
||
if (!disabled) {
|
||
onSelect(level)
|
||
}
|
||
}, [disabled, onSelect])
|
||
|
||
return (
|
||
<div className={`space-y-3 ${className}`}>
|
||
<h3 className="text-lg font-semibold text-gray-900 mb-4 text-left">
|
||
請選擇您對這個詞彙的熟悉程度：
|
||
</h3>
|
||
<div className="grid grid-cols-5 gap-3">
|
||
{Object.entries(confidenceConfig).map(([level, config]) => {
|
||
const levelNum = parseInt(level)
|
||
const isSelected = selectedLevel === levelNum
|
||
|
||
return (
|
||
<button
|
||
key={level}
|
||
onClick={() => handleSelect(levelNum)}
|
||
disabled={disabled}
|
||
className={`
|
||
px-3 py-2 rounded-lg border-2 text-center font-medium transition-all duration-200
|
||
${isSelected
|
||
? 'ring-2 ring-blue-400 ring-opacity-75 transform scale-105'
|
||
: ''
|
||
}
|
||
${disabled
|
||
? 'opacity-50 cursor-not-allowed'
|
||
: 'cursor-pointer active:scale-95'
|
||
}
|
||
${config.color}
|
||
`}
|
||
>
|
||
<div className="flex items-center justify-center h-8">
|
||
<span className="text-sm">
|
||
{config.label}
|
||
</span>
|
||
</div>
|
||
</button>
|
||
)
|
||
})}
|
||
</div>
|
||
</div>
|
||
)
|
||
})
|
||
|
||
ConfidenceButtons.displayName = 'ConfidenceButtons' |