mrleo1nidandClaude Opus 5.5
e979adca57
Reserved CountryCode "XX" (Inbound.BalancerCountryCode) marks an inbound behind a load balancer whose exit country is unknown: the site shows a Shuffle icon with a tooltip instead of a flag, the bot shows 🔀. Admin can pick it in the publish dialog. Fits the existing column, no migration. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
23 lines
942 B
TypeScript
23 lines
942 B
TypeScript
import { Shuffle } from 'lucide-react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { BALANCER_COUNTRY_CODE, FLAGS } from '@/shared/lib/countries'
|
|
import { cn } from '@/shared/lib/cn'
|
|
|
|
export function CountryFlag({ code, className }: { code: string | null | undefined; className?: string }) {
|
|
const { t } = useTranslation()
|
|
if (!code) return null
|
|
if (code.toUpperCase() === BALANCER_COUNTRY_CODE) {
|
|
const label = t('countries.balancer')
|
|
return (
|
|
<span title={label} aria-label={label} className={cn('inline-flex shrink-0 text-sky-400', className)}>
|
|
<Shuffle className="h-3.5 w-3.5" aria-hidden />
|
|
</span>
|
|
)
|
|
}
|
|
const Flag = FLAGS[code.toUpperCase()]
|
|
if (!Flag) {
|
|
return <span className={cn('font-mono text-xs text-muted-foreground', className)}>{code.toUpperCase()}</span>
|
|
}
|
|
return <Flag className={cn('inline-block h-3.5 w-auto shrink-0 rounded-[2px]', className)} aria-hidden />
|
|
}
|