feat: replace language selector text/globe with country flag icons

src/layouts/PublicLayout.tsx

@@ -1,11 +1,4 @@
-import {
-  Check,
-  ChevronDown,
-  Globe,
-  Menu,
-  Search as SearchIcon,
-  X,
-} from "lucide-react";
+import { ChevronDown, Menu, Search as SearchIcon, X } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { Link, Outlet, useLocation, useNavigate } from "react-router-dom";
 import { ArkLogoMark } from "../components/ArkLogoMark";
@@ -65,9 +58,27 @@ type LanguageDropdownProps = {
   className?: string;
 };
 
-function languageButtonLabel(lang: Lang): string {
-  if (lang === "zh-CN") return "中";
-  return lang.toUpperCase();
+function flagSrc(code: Lang): string {
+  return `/assets/ark-library/flags/${code}.svg`;
+}
+
+function FlagIcon({
+  code,
+  className = "",
+}: {
+  code: Lang;
+  className?: string;
+}) {
+  return (
+    <img
+      src={flagSrc(code)}
+      alt=""
+      aria-hidden
+      draggable={false}
+      decoding="async"
+      className={`shrink-0 rounded-full object-cover ${className}`}
+    />
+  );
 }
 
 function LanguageDropdown({
@@ -110,7 +121,7 @@ function LanguageDropdown({
         aria-haspopup="listbox"
         aria-expanded={open}
       >
-        <Globe size={16} className="shrink-0 text-ark-gold/80" aria-hidden />
+        <FlagIcon code={lang} className="h-5 w-5" />
         <span className="min-w-0 flex-1 truncate text-left">
           {selected?.label ?? lang}
         </span>
@@ -147,11 +158,7 @@ function LanguageDropdown({
                     : "text-neutral-200 hover:bg-white/10 hover:text-white"
                 }`}
               >
-                <span className="flex h-4 w-4 shrink-0 items-center justify-center">
-                  {active ? (
-                    <Check className="h-4 w-4" strokeWidth={2.4} />
-                  ) : null}
-                </span>
+                <FlagIcon code={option.code} className="h-5 w-5" />
                 <span className="truncate font-medium">{option.label}</span>
               </button>
             );
@@ -206,12 +213,12 @@ function MobileLanguageButton({
           onOpen?.();
           setOpen((value) => !value);
         }}
-        className="flex h-10 w-10 items-center justify-center rounded-full border border-[#58585d] bg-transparent text-[15px] font-normal leading-[15px] text-[#e4e4e6] outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-[#08070c]"
+        className="flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-[#191921] outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-[#08070c]"
         aria-label={ariaLabel}
         aria-haspopup="listbox"
         aria-expanded={open}
       >
-        {languageButtonLabel(lang)}
+        <FlagIcon code={lang} className="h-7 w-7" />
       </button>
 
       {open ? (
@@ -238,11 +245,7 @@ function MobileLanguageButton({
                     : "text-neutral-200 hover:bg-white/10 hover:text-white"
                 }`}
               >
-                <span className="flex h-4 w-4 shrink-0 items-center justify-center">
-                  {active ? (
-                    <Check className="h-4 w-4" strokeWidth={2.4} />
-                  ) : null}
-                </span>
+                <FlagIcon code={option.code} className="h-5 w-5" />
                 <span className="truncate font-medium">{option.label}</span>
               </button>
             );