packages/components/containers/vpn/gateways/CountryFlagAndName.tsx

   1 import type { ImgHTMLAttributes } from 'react';
   2
   3 import clsx from '@proton/utils/clsx';
   4
   5 import { getFlagSvg } from '../flag';
   6
   7 export const CountryFlagAndName = ({
   8     countryCode,
   9     countryName,
  10     className,
  11     ...rest
  12 }: {
  13     countryCode?: string;
  14     countryName?: string;
  15 } & ImgHTMLAttributes<HTMLImageElement>) => {
  16     const upperCode = (countryCode || '').toUpperCase();
  17     const flag = getFlagSvg(upperCode);
  18
  19     return (
  20         <>
  21             {flag && (
  22                 <img width={20} className={clsx(['mx-2 border', className])} src={flag} alt={countryName} {...rest} />
  23             )}
  24             {countryName}
  25         </>
  26     );
  27 };