Added country flags.

components/common/FilterLink.js

@@ -6,14 +6,15 @@ import usePageQuery from 'hooks/usePageQuery';
 import useMessages from 'hooks/useMessages';
 import styles from './FilterLink.module.css';
 
-export function FilterLink({ id, value, label, externalUrl }) {
+export function FilterLink({ id, value, label, externalUrl, children, className }) {
   const { formatMessage, labels } = useMessages();
   const { resolveUrl, query } = usePageQuery();
   const active = query[id] !== undefined;
   const selected = query[id] === value;
 
   return (
-    <div className={styles.row}>
+    <div className={classNames(styles.row, className)}>
+      {children}
       {!value && `(${label || formatMessage(labels.unknown)})`}
       {value && (
         <Link

components/common/FilterLink.module.css

@@ -1,6 +1,7 @@
 .row {
   display: flex;
   align-items: center;
+  gap: 10px;
 }
 
 .row .inactive {

components/metrics/CountriesTable.js

@@ -11,9 +11,14 @@ export function CountriesTable({ websiteId, ...props }) {
 
   function renderLink({ x: code }) {
     return (
-      <div className={locale}>
-        <FilterLink id="country" value={countryNames[code] && code} label={countryNames[code]} />
-      </div>
+      <FilterLink
+        id="country"
+        className={locale}
+        value={countryNames[code] && code}
+        label={countryNames[code]}
+      >
+        <img src={`/images/flags/${code.toLowerCase()}.png`} alt={code} />
+      </FilterLink>
     );
   }
 

components/metrics/RegionsTable.js

@@ -15,11 +15,11 @@ export function RegionsTable({ websiteId, ...props }) {
     return regions[x] ? `${regions[x]}, ${countryNames[x.split('-')[0]]}` : x;
   };
 
-  const renderLink = ({ x }) => {
+  const renderLink = ({ x: code }) => {
     return (
-      <div className={locale}>
-        <FilterLink id="region" value={x} label={renderLabel(x)} />
-      </div>
+      <FilterLink id="region" className={locale} value={code} label={renderLabel(code)}>
+        <img src={`/images/flags/${code.split('-')[0].toLowerCase()}.png`} alt={code} />
+      </FilterLink>
     );
   };