36 lines
1.0 KiB
TypeScript
36 lines
1.0 KiB
TypeScript
interface DifficultyBadgeProps {
|
|
level: string
|
|
className?: string
|
|
}
|
|
|
|
export const DifficultyBadge: React.FC<DifficultyBadgeProps> = ({
|
|
level,
|
|
className = ''
|
|
}) => {
|
|
const getBadgeStyle = (level: string) => {
|
|
switch (level?.toUpperCase()) {
|
|
case 'A1':
|
|
return 'bg-green-100 text-green-800 border-green-200'
|
|
case 'A2':
|
|
return 'bg-blue-100 text-blue-800 border-blue-200'
|
|
case 'B1':
|
|
return 'bg-yellow-100 text-yellow-800 border-yellow-200'
|
|
case 'B2':
|
|
return 'bg-orange-100 text-orange-800 border-orange-200'
|
|
case 'C1':
|
|
return 'bg-red-100 text-red-800 border-red-200'
|
|
case 'C2':
|
|
return 'bg-purple-100 text-purple-800 border-purple-200'
|
|
default:
|
|
return 'bg-gray-100 text-gray-800 border-gray-200'
|
|
}
|
|
}
|
|
|
|
return (
|
|
<span
|
|
className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${getBadgeStyle(level)} ${className}`}
|
|
>
|
|
{level?.toUpperCase() || 'N/A'}
|
|
</span>
|
|
)
|
|
} |