fix unknown icon and country render link

package.json

@@ -74,7 +74,7 @@
     "@react-spring/web": "^9.7.3",
     "@tanstack/react-query": "^5.28.6",
     "@umami/prisma-client": "^0.14.0",
-    "@umami/react-zen": "^0.16.0",
+    "@umami/react-zen": "^0.19.0",
     "@umami/redis-client": "^0.21.0",
     "chalk": "^4.1.1",
     "chart.js": "^4.4.2",

src/components/common/TypeIcon.tsx

@@ -12,9 +12,12 @@ export function TypeIcon({
   return (
     <>
       <img
-        src={`${process.env.basePath || ''}/images/${type}/${
+        src={`${process.env.basePath || ''}/images/${type}/${value
-          value?.replaceAll(' ', '-').toLowerCase() || 'unknown'
+          ?.replaceAll(' ', '-')
-        }.png`}
+          .toLowerCase()}.png`}
+        onError={e => {
+          e.currentTarget.src = `${process.env.basePath || ''}/images/${type}/unknown.png`;
+        }}
         alt={value}
         width={type === 'country' ? undefined : 16}
         height={type === 'country' ? undefined : 16}

src/components/metrics/CountriesTable.tsx

@@ -12,7 +12,11 @@ export function CountriesTable({ ...props }: MetricsTableProps) {
 
   const renderLink = ({ x: code }) => {
     return (
-      <FilterLink id="country" value={countryNames[code] && code} label={formatCountry(code)}>
+      <FilterLink
+        id="country"
+        value={(countryNames[code] && code) || code}
+        label={formatCountry(code)}
+      >
         <TypeIcon type="country" value={code?.toLowerCase()} />
       </FilterLink>
     );

yarn.lock

@@ -4817,10 +4817,10 @@
     chalk "^4.1.2"
     debug "^4.3.4"
 
-"@umami/react-zen@^0.16.0":
+"@umami/react-zen@^0.19.0":
-  version "0.16.0"
+  version "0.19.0"
-  resolved "https://registry.yarnpkg.com/@umami/react-zen/-/react-zen-0.16.0.tgz#8f14815e175fb93915f9ab48239d138fec1a8561"
+  resolved "https://registry.yarnpkg.com/@umami/react-zen/-/react-zen-0.19.0.tgz#31665002892a56f2d2925bcbeed0c6a853f59838"
-  integrity sha512-NyLV+DKaye9zZ6p+TH7JCoUJX859UxfMFbFq7k0CIGl+n6Eg6ePQyVIm/IGk+wVCgnCxfYQv4VRgj6m4QBhiPw==
+  integrity sha512-TgZzHXW0yRzjO0zeDd9op3TyF+oJDZo8vrd4bgH0B/L4jaqMM+p2UgUykb4/TyXQ9FJ2AHuyuDR8Q1UAeB3IzQ==
   dependencies:
     "@fontsource/jetbrains-mono" "^5.0.18"
     "@mdx-js/loader" "^3.0.0"
@@ -4835,7 +4835,7 @@
     next "15.0.2"
     next-mdx-remote "^5.0.0"
     react "^19.0.0-rc-66855b96-20241106"
-    react-aria-components "^1.2.1"
+    react-aria-components "^1.5.0"
     react-dom "^19.0.0-rc-66855b96-20241106"
     react-hook-form "^7.53.0"
     react-icons "^5.2.1"
@@ -11444,7 +11444,7 @@ randombytes@^2.1.0:
   dependencies:
     safe-buffer "^5.1.0"
 
-react-aria-components@^1.2.1:
+react-aria-components@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/react-aria-components/-/react-aria-components-1.5.0.tgz#9c51ba8427e827d1192f965249e16ff7d34cbb55"
   integrity sha512-wzf0g6cvWrqAJd4FkisAfFnslx6AJREgOd/NEmVE/RGuDxGTzss4awcwbo98rIVmqbTTFApiygy0SyWGrRZfDA==
@@ -12537,16 +12537,7 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0":
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -12644,14 +12635,7 @@ stringify-entities@^4.0.0:
     character-entities-html4 "^2.0.0"
     character-entities-legacy "^3.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -13559,7 +13543,7 @@ word-wrap@^1.2.5:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -13577,15 +13561,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.0.1, wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"