Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | 106x 106x 108x 104x 104x 104x 104x 104x 106x 120x 120x 120x | import React from "react";
import { styled } from "@mui/material";
import { parsePhoneNumberFromString } from "libphonenumber-js";
import { getDefaultCountryCode } from "@shared/HFInputs/HFGiveTelephone/phoneNumber.utils";
import { formatPhone } from "@utils/helpers";
type FlagSize = "small" | "medium" | "large";
const formattedSizes: Record<FlagSize, number> = {
small: 40,
medium: 80,
large: 160,
};
type ContryFlagBaseProps = {
size?: FlagSize;
width?: number;
height?: number;
isoCode?: string;
};
type CountryFlagProps = ContryFlagBaseProps & {
phoneNumber: string;
};
// docs https://flagpedia.net/download/api
const CountryFlag = ({ phoneNumber, ...props }: CountryFlagProps) => {
if (!phoneNumber) return <></>;
const phoneNumberWithPlus = formatPhone(phoneNumber);
const phone = parsePhoneNumberFromString(phoneNumberWithPlus);
const fallBackCountryCode =
!phone?.country && phone?.countryCallingCode !== "1"
? getDefaultCountryCode(phoneNumberWithPlus)
: "";
const isoCode =
!phone?.country && phone?.countryCallingCode === "1"
? "us"
: phone?.country?.toLowerCase() || fallBackCountryCode?.toLowerCase();
return <CountryFlagBase isoCode={isoCode} {...props} />;
};
export const CountryFlagBase = ({
size = "small",
width = 24,
height = 24,
isoCode,
}: ContryFlagBaseProps) => {
const src = isoCode
? `${process.env.VITE_ASSETS_CDN_HOST}/flags/w${formattedSizes[size]}/${isoCode}.png`
: "";
return isoCode ? (
<Image width={width} height={height} src={src} loading="lazy" />
) : (
<></>
);
};
const Image = styled("img")(() => ({
borderRadius: "50%",
}));
export default React.memo(CountryFlag);
|