Files
nuzlocke-tracker/frontend/src/components/ConditionBadge.tsx

37 lines
1.0 KiB
TypeScript
Raw Normal View History

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>
)
}