Files
worldcup/components/team-flag.tsx
T
valknar 39985a5c71 fix: override stale DB iso2 with registry for known defunct nations
The DB still holds old codes (su, yu) from before the null mapping was
added. TeamFlag now checks TEAM_ISO by name first so the registry wins
over any stale value the DB returns.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-14 19:25:55 +02:00

57 lines
1.6 KiB
TypeScript

import { TEAM_ISO, getIso } from '@/lib/iso-codes'
interface Props {
name: string
iso2?: string | null
size?: 'sm' | 'md' | 'lg' | 'xl'
className?: string
}
const sizes = { sm: 'text-lg', md: 'text-2xl', lg: 'text-4xl', xl: 'text-[60px]' }
const placeholderSize = {
sm: { width: '1.35em', height: '1em', fontSize: '0.38em' },
md: { width: '1.35em', height: '1em', fontSize: '0.38em' },
lg: { width: '1.35em', height: '1em', fontSize: '0.38em' },
xl: { width: '1.35em', height: '1em', fontSize: '0.38em' },
}
export function TeamFlag({ name, iso2, size = 'md', className = '' }: Props) {
// If the name is in our registry, trust it over the DB value (which may be stale).
// For unknown teams, fall back to the DB iso2.
const code = name in TEAM_ISO ? TEAM_ISO[name] : (iso2 ?? getIso(name))
if (!code) {
const abbr = name
.split(/\s+/)
.map(w => w[0])
.join('')
.slice(0, 3)
.toUpperCase()
return (
<span
className={`rounded-sm inline-flex items-center justify-center flex-shrink-0 ${sizes[size]} ${className}`}
style={{
...placeholderSize[size],
background: 'rgba(42,92,53,0.35)',
color: '#6abf7a',
fontFamily: 'Space Grotesk, sans-serif',
fontWeight: 700,
letterSpacing: '0.04em',
lineHeight: 1,
}}
title={name}
>
{abbr}
</span>
)
}
return (
<span
className={`fi fi-${code} rounded-sm inline-block flex-shrink-0 ${sizes[size]} ${className}`}
title={name}
/>
)
}