From f49d6e868e8589842f751ceb863db7af1377e6d0 Mon Sep 17 00:00:00 2001
From: verbiricha <bandarra+gith@protonmail.com>
Date: Fri, 19 Apr 2024 12:49:46 +0200
Subject: [PATCH] only show the country flag when available

---
 src/hooks/lang.ts    | 2 +-
 src/pages/layout.tsx | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/hooks/lang.ts b/src/hooks/lang.ts
index af43fcb..907ca79 100644
--- a/src/hooks/lang.ts
+++ b/src/hooks/lang.ts
@@ -19,7 +19,7 @@ const LangSelector = new LangStore();
 export function useLang() {
   const store = useSyncExternalStore(
     c => LangSelector.hook(c),
-    () => LangSelector.snapshot()
+    () => LangSelector.snapshot(),
   );
 
   return {
diff --git a/src/pages/layout.tsx b/src/pages/layout.tsx
index 92cae56..1686318 100644
--- a/src/pages/layout.tsx
+++ b/src/pages/layout.tsx
@@ -25,6 +25,7 @@ export function LayoutPage() {
   const login = useLogin();
   const [showLogin, setShowLogin] = useState(false);
   const { lang, setLang } = useLang();
+  const country = lang.split(/[-_]/i)[1]?.toLowerCase();
 
   useLoginEvents(login?.pubkey, true);
 
@@ -38,7 +39,7 @@ export function LayoutPage() {
         menuClassName="ctx-menu"
         menuButton={
           <div className="flex gap-2 items-center">
-            <div className={`fi fi-${lang.split(/[-_]/i)[1]?.toLowerCase()}`}></div>
+            {country && <div className={`fi fi-${country}`}></div>}
             <div className="uppercase pointer">
               <b>{lang.includes("-") ? lang.split("-")[0] : lang}</b>
             </div>
@@ -47,7 +48,7 @@ export function LayoutPage() {
         align="end"
         gap={5}>
         {AllLocales.sort().map(l => (
-          <MenuItem onClick={() => setLang(l)} key={l}>
+          <MenuItem className="capitalize" onClick={() => setLang(l)} key={l}>
             {new Intl.DisplayNames([l], {
               type: "language",
             }).of(l)}