// flags.jsx — inline SVG country flags keyed by source ID.
// Tiny (each ~150 bytes) so we don't pull in a flag library.
// Aspect ratio 4:3 except where noted (CH is 1:1, BA/HR rectangles too).
// Exported as a global window.SourceFlag(sourceId) → JSX node.
// Standard 12px-tall pill. Use width:auto so 4:3 vs 3:2 vs 1:1 all sit nicely.
const F = {
// Austria — red/white/red horizontal
at: (
),
// Germany — black/red/gold
de: (
),
// Switzerland — red square w/ white cross (1:1)
ch: (
),
// si — served as static SVG from /flags/si.svg (see FILE_FLAGS below).
// Italy — green/white/red vertical
it: (
),
// ba — served as static SVG from /flags/ba.svg (see FILE_FLAGS below).
// hr — served as static SVG from /flags/hr.svg (see FILE_FLAGS below).
// Serbia — red/blue/white horizontal (top-down)
rs: (
),
// EU — blue w/ ring of 12 stars (simplified — center stars only)
eu: (
),
// Hungary — red/white/green horizontal
hu: (
),
// Poland — white over red
pl: (
),
// France — blue/white/red vertical
fr: (
),
// Spain — red/yellow/red (yellow band is doubled height: 1:2:1).
// Vivid official colours (rojo #C60B1E / gualda #FFC400) — the previous
// #AA151B brick-red read muddy/brown next to the brighter reds in the grid.
es: (
),
// Netherlands — red/white/blue horizontal
nl: (
),
// Belgium — black/yellow/red vertical
be: (
),
// Czech Republic — white/red with blue triangle on the hoist
cz: (
),
// Romania — blue/yellow/red vertical
ro: (
),
// Sweden — blue with yellow Nordic cross
se: (
),
};
// Source ID → ISO country code (matches SOURCES in webapp/src/constants/sources.ts)
const SOURCE_COUNTRY = {
1: 'at', // Willhaben
2: 'de', // Mobile.de
3: 'ba', // OLX.ba
4: 'ch', // Ricardo.ch
5: 'ch', // Tutti.ch
6: 'rs', // Polovniautomobili (serves ex-YU; flagged as RS, label "ex-YU" can sit alongside)
7: 'eu', // AutoScout24.com (multi: DE/AT/BE/ES/FR/IT/LU/NL)
8: 'it', // Subito.it
9: 'si', // Avto.net
10: 'hr', // Njuskalo.hr
11: 'de', // Kleinanzeigen
12: 'ch', // AutoScout24.ch
13: 'ch', // Anibis.ch
14: 'at', // Gebrauchtwagen.at
15: 'hu', // Hasznaltauto.hu
16: 'pl', // Otomoto.pl
17: 'it', // Automoto.it
18: 'fr', // Leboncoin.fr
19: 'es', // Coches.net
20: 'nl', // Marktplaats.nl
21: 'be', // 2dehands.be
22: 'cz', // Sauto.cz
23: 'ro', // Autovit.ro
24: 'nl', // AutoTrack.nl
25: 'es', // motor.es
26: 'pl', // Gratka.pl
27: 'se', // Blocket.se
};
const COUNTRY_LABEL = {
at: 'Austria', de: 'Germany', ch: 'Switzerland', si: 'Slovenia',
it: 'Italy', ba: 'Bosnia & Herzegovina', hr: 'Croatia', rs: 'ex-Yugoslavia',
eu: 'EU (multi-country)',
hu: 'Hungary', pl: 'Poland', fr: 'France', es: 'Spain',
nl: 'Netherlands', be: 'Belgium', cz: 'Czech Republic', ro: 'Romania',
se: 'Sweden',
};
// Countries whose flags are served as static SVGs from /flags/{cc}.svg
// instead of being drawn inline. These are the three whose hand-drawn
// versions were either wrong (BA triangle reversed) or indistinguishable
// from other countries' flags without their coats of arms (SI vs RU,
// HR vs NL). Loaded via ![]()
so the browser caches the file once.
const FILE_FLAGS = new Set(['ba', 'si', 'hr']);
// SourceFlag — small chip-sized flag, rendered inline beside a source name.
function SourceFlag({ sourceId, size = 16 }) {
const cc = SOURCE_COUNTRY[sourceId];
if (!cc) return null;
// CH is 1:1, others ~3:2 — width auto keeps the proportions natural.
const isSquare = cc === 'ch';
const style = {
height: size,
width: isSquare ? size : size * 1.5,
display: 'inline-block',
verticalAlign: 'middle',
borderRadius: 2,
boxShadow: '0 0 0 1px rgba(255,255,255,0.08)',
overflow: 'hidden',
flexShrink: 0,
};
const label = COUNTRY_LABEL[cc];
if (FILE_FLAGS.has(cc)) {
return (
);
}
const svg = F[cc];
if (!svg) return null;
return (
{svg}
);
}
Object.assign(window, { SourceFlag, SOURCE_COUNTRY, COUNTRY_LABEL });