Language switcher re-styled

Author: stever

apps/play/src/components/Nav.jsx

@@ -41,7 +41,7 @@ export default function Nav() {
                                     navigate(`/search?q=${searchInput}`);
                                 }
                             }}/>
-                        <LanguageSwitcher className="mx-1 p-2 border-round"/>
+                        <LanguageSwitcher className="mx-1"/>
                     </div>
                 )}
                 style={{

apps/web/src/components/Nav.jsx

@@ -54,7 +54,7 @@ export default function Nav() {
         start={
           <img alt="logo" src="/logo.png" height={"40"} className="mx-1" />
         }
-        end={<LanguageSwitcher className="p-2 border-round" />}
+        end={<LanguageSwitcher className="mr-2" />}
         style={{
           borderRadius: isMobile ? 0 : "5px",
           borderColor: "#1E1E1E",

packages/i18n/LanguageSwitcher.jsx

@@ -1,25 +1,45 @@
 import React from 'react';
 import {useTranslation} from 'react-i18next';
+import {Dropdown} from 'primereact/dropdown';
 import {SUPPORTED_LANGUAGES} from './languages';
 
-// Dependency-free language picker (plain <select>) so the shared package stays
-// light. Apps pass className/style to match their own chrome.
+// Language picker built on primereact's Dropdown so it inherits the site theme
+// (both apps already ship primereact). A leading globe icon marks it as the
+// language control. Apps pass className/style to fit their own chrome.
 export function LanguageSwitcher({className, style}) {
     const {i18n, t} = useTranslation();
     const active = (i18n.resolvedLanguage || i18n.language || 'en').split('-')[0];
     const value = SUPPORTED_LANGUAGES.some((l) => l.code === active) ? active : 'en';
 
+    const selectedTemplate = (option) => {
+        const label =
+            option?.label ??
+            SUPPORTED_LANGUAGES.find((l) => l.code === value)?.label ??
+            '';
+        return (
+            <span className="flex align-items-center gap-2">
+                <i className="pi pi-globe" />
+                <span>{label}</span>
+            </span>
+        );
+    };
+
     return (
-        <select
+        <Dropdown
             aria-label={t('language')}
             className={className}
-            style={style}
+            style={{width: '11rem', ...style}}
             value={value}
-            onChange={(e) => i18n.changeLanguage(e.target.value)}
-        >
-            {SUPPORTED_LANGUAGES.map((l) => (
-                <option key={l.code} value={l.code}>{l.label}</option>
-            ))}
-        </select>
+            options={SUPPORTED_LANGUAGES}
+            optionLabel="label"
+            optionValue="code"
+            scrollHeight="500px"
+            onChange={(e) => i18n.changeLanguage(e.value)}
+            valueTemplate={selectedTemplate}
+            pt={{
+                input: {className: 'p-2'},
+                trigger: {style: {width: '2rem'}},
+            }}
+        />
     );
 }

packages/i18n/package.json

@@ -10,6 +10,7 @@
     "react-i18next": "^15.4.0"
   },
   "peerDependencies": {
+    "primereact": ">=9",
     "react": ">=18"
   }
 }