Adds new Flag component (electricitymaps#50)

web/package.json

@@ -43,6 +43,7 @@
     "@types/d3-selection": "^3.0.3",
     "@types/d3-shape": "^3.1.0",
     "@types/sprintf-js": "^1.1.2",
+    "country-flag-icons": "^1.5.5",
     "currency-symbol-map": "^5.1.0",
     "d3-array": "^3.2.0",
     "d3-scale": "^4.0.2",

web/src/components/Flag.tsx

@@ -1,42 +1,45 @@
-import { resolvePath } from 'react-router-dom';
+import flags from 'country-flag-icons/react/3x2';
 
-const DEFAULT_FLAG_SIZE = 48;
+const DEFAULT_FLAG_SIZE = 18;
 
-const getFlagFileName = (zoneId: string) => {
-  // Return (zonesConfig[zoneId.toUpperCase()] || {}).flag_file_name; TODO: enable when config setup
-  if (zoneId === 'DK-DK1') {
-    return 'dk.png';
-  }
-
-  if (zoneId === 'ES') {
-    return 'es.png';
-  }
+const SPECIAL_ZONE_NAMES = {
+  AUS: 'AU',
+} as { [index: string]: string };
 
-  return 'us.png';
-};
+function getCountryName(zoneId: string) {
+  const country = zoneId.split('-')[0];
+  const flagName = SPECIAL_ZONE_NAMES[country] || country;
+  return flagName.toUpperCase();
+}
 
-const getFlagUri = function (zoneId: string, flagSize = DEFAULT_FLAG_SIZE) {
-  if (!zoneId) {
-    return;
-  }
-  const flagFile = getFlagFileName(zoneId);
-  return resolvePath(`flags_iso/${flagSize}/${flagFile}`).pathname;
-};
+type HTMLSVGElement = HTMLElement & SVGElement;
+interface CountryFlagProps
+  extends React.HTMLAttributes<HTMLSVGElement>,
+    React.SVGAttributes<HTMLSVGElement> {
+  zoneId: string;
+  size?: number;
+}
 
 export function CountryFlag({
   zoneId,
-  flagSize = DEFAULT_FLAG_SIZE,
+  size = DEFAULT_FLAG_SIZE,
   ...props
-}: {
-  zoneId: string;
-  flagSize?: number;
-  className?: string;
-}) {
-  const flagUri = getFlagUri(zoneId, flagSize);
+}: CountryFlagProps) {
+  const countryName = getCountryName(zoneId) as keyof typeof flags;
+  const FlagIcon = flags[countryName];
 
-  if (flagUri === undefined) {
-    return <div>No flag</div>;
+  if (!FlagIcon) {
+    return <span className={`text-[14px]`}>🏴‍☠️</span>;
   }
-
-  return <img src={flagUri} alt={zoneId} {...props} />;
+  return (
+    <FlagIcon
+      title="TODO"
+      width={size}
+      height={Math.floor((size / 3) * 2)}
+      style={{
+        minWidth: size,
+      }}
+      {...props}
+    />
+  );
 }

web/src/features/panels/zone/CountryTag.tsx

@@ -6,12 +6,12 @@ export function CountryTag({ zoneId }: { zoneId: string }) {
   const isACountry = zoneId !== 'US' && zoneId.length === 2; // TODO: set up proper method to check if zoneId is a country
 
   if (isACountry) {
-    return <CountryFlag zoneId={zoneId} flagSize={16} className="inline-flex" />;
+    return <CountryFlag zoneId={zoneId} size={16} className="inline-flex" />;
   }
 
   return (
     <span className="inline-flex items-center gap-1 rounded-full bg-gray-200 px-2 py-0.5 text-xs dark:bg-gray-900">
-      <CountryFlag zoneId={zoneId} flagSize={16} />
+      <CountryFlag zoneId={zoneId} size={16} />
       <span>{countryName}</span>
     </span>
   );