Files
nginx-proxy-manager/frontend/src/components/Flag/Flag.tsx

33 lines
796 B
TypeScript

import { Box } from "@chakra-ui/layout";
import { hasFlag } from "country-flag-icons";
// @ts-ignore Creating a typing for a subfolder is not easily possible
import Flags from "country-flag-icons/react/3x2";
interface FlagProps {
/**
* Additional Class
*/
className?: string;
/**
* Two letter country code of flag
*/
countryCode: string;
}
function Flag({ className, countryCode }: FlagProps) {
countryCode = countryCode.toUpperCase();
if (hasFlag(countryCode)) {
// @ts-ignore have to do this because of above
const FlagElement = Flags[countryCode] as any;
return (
<Box as={FlagElement} title={countryCode} className={className} w={6} />
);
} else {
console.error(`No flag for country ${countryCode} found!`);
return <Box w={6} h={4} />;
}
}
export { Flag };