Moved v3 code from NginxProxyManager/nginx-proxy-manager-3 to NginxProxyManager/nginx-proxy-manager

frontend/src/components/Flag/Flag.tsx

@@ -0,0 +1,32 @@
+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 };