Show colored pill badges (Mega, G-Max, D-Max, Tera) on boss Pokemon in BossDefeatModal and BossTeamPreview. Starter-dependent condition labels are ignored. Follows EncounterMethodBadge pattern. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
37 lines
1.0 KiB
TypeScript
37 lines
1.0 KiB
TypeScript
const CONDITION_CONFIG: Record<string, { label: string; color: string }> = {
|
|
'Mega Evolution': {
|
|
label: 'Mega',
|
|
color: 'bg-fuchsia-100 text-fuchsia-800 dark:bg-fuchsia-900/40 dark:text-fuchsia-300',
|
|
},
|
|
Gigantamax: {
|
|
label: 'G-Max',
|
|
color: 'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300',
|
|
},
|
|
Dynamax: {
|
|
label: 'D-Max',
|
|
color: 'bg-rose-100 text-rose-800 dark:bg-rose-900/40 dark:text-rose-300',
|
|
},
|
|
Terastallize: {
|
|
label: 'Tera',
|
|
color: 'bg-teal-100 text-teal-800 dark:bg-teal-900/40 dark:text-teal-300',
|
|
},
|
|
}
|
|
|
|
export function ConditionBadge({
|
|
condition,
|
|
size = 'sm',
|
|
}: {
|
|
condition: string | null
|
|
size?: 'sm' | 'xs'
|
|
}) {
|
|
if (!condition) return null
|
|
const config = CONDITION_CONFIG[condition]
|
|
if (!config) return null
|
|
const sizeClass = size === 'xs' ? 'text-[8px] px-1 py-0' : 'text-[9px] px-1.5 py-0.5'
|
|
return (
|
|
<span className={`${sizeClass} font-medium rounded-full whitespace-nowrap ${config.color}`}>
|
|
{config.label}
|
|
</span>
|
|
)
|
|
}
|