valknar
b141356247
- Add --color-green-mid token (#4a7a55) to @theme for dimmer stat values
- Replace all text-[#hex]/bg-[#hex] arbitrary values with named tokens:
text-green, text-green-light, text-green-sec, text-green-muted,
text-green-dark, text-green-mid, text-text, bg-card, bg-bg, border-border
- Replace rgba(34,197,94,X) inline styles with bg-green/X opacity modifiers
- Convert single-prop style={{ borderColor/background }} to className
- Fix SVG stroke="#dff5e8" → stroke="currentColor"
- Use CSS variables in globals.css base styles (background-color, color)
- Move app/data/wikipedia/ → data/ (project root, not inside Next.js app dir)
- Update Dockerfile, seed.ts, scrape-wikipedia.ts paths accordingly
- Remove unused app/data/world_cup.csv
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
53 lines
1.5 KiB
TypeScript
53 lines
1.5 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]' }
|
|
|
|
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 (
|
|
// Outer span matches flag-icons dimensions: width=1.33em, height=1em relative
|
|
// to the Tailwind font-size class. fontSize must NOT be set here or em shrinks.
|
|
<span
|
|
className={`rounded-sm inline-flex items-center justify-center flex-shrink-0 ${sizes[size]} ${className}`}
|
|
style={{ width: '1.33em', height: '1em', background: 'rgba(42,92,53,0.35)' }}
|
|
title={name}
|
|
>
|
|
<span style={{
|
|
fontSize: '0.38em',
|
|
color: 'var(--color-green-sec)',
|
|
fontFamily: 'Space Grotesk, sans-serif',
|
|
fontWeight: 700,
|
|
letterSpacing: '0.04em',
|
|
lineHeight: 1,
|
|
}}>
|
|
{abbr}
|
|
</span>
|
|
</span>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<span
|
|
className={`fi fi-${code} rounded-sm inline-block flex-shrink-0 ${sizes[size]} ${className}`}
|
|
title={name}
|
|
/>
|
|
)
|
|
}
|