packages/components/containers/vpn/OpenVPNConfigurationSection/Country.tsx

   1 import { c } from 'ttag';
   2
   3 import type { Logical } from '@proton/shared/lib/vpn/Logical';
   4
   5 import { type CountryOptions, correctAbbr, getLocalizedCountryByAbbr } from '../../../helpers/countries';
   6 import { getFlagSvg } from '../flag';
   7
   8 const Country = ({
   9     server: { EntryCountry, ExitCountry },
  10     countryOptions,
  11 }: {
  12     server: Logical;
  13     countryOptions: CountryOptions;
  14 }) => {
  15     const isRouted = EntryCountry && EntryCountry !== ExitCountry;
  16     const correctEntryCountry = correctAbbr(EntryCountry);
  17     const correctExitCountry = correctAbbr(ExitCountry);
  18     const entryCountryName = getLocalizedCountryByAbbr(correctEntryCountry, countryOptions);
  19     const exitCountryName = getLocalizedCountryByAbbr(correctExitCountry, countryOptions);
  20
  21     return (
  22         <div className="inline-flex *:self-center">
  23             <img width={20} className="mr-2 border" src={getFlagSvg(correctExitCountry)} alt={exitCountryName} />
  24             <p className="mx-1">{exitCountryName}</p>
  25             {isRouted && <span className="color-weak">{c('CountryInfo').t`(via ${entryCountryName})`}</span>}
  26         </div>
  27     );
  28 };
  29 export default Country;