🐛 fix(locale): Language Select

apps/admin/.i18nrc.json

@@ -33,6 +33,6 @@
     "uk-UA",
     "vi-VN",
     "zh-CN",
-    "zh-TW"
+    "zh-HK"
   ]
 }

apps/admin/components/language-switch.tsx

@@ -4,13 +4,7 @@ import { locales } from '@/config/constants';
 import { setLocale } from '@/utils/common';
 import { Icon } from '@iconify/react';
 import { getCountry } from '@repo/ui/utils';
-import { Button } from '@shadcn/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@shadcn/ui/dropdown-menu';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@shadcn/ui/select';
 import { useLocale, useTranslations } from 'next-intl';
 import { useRouter } from 'next/navigation';
 
@@ -20,30 +14,31 @@ export default function LanguageSwitch() {
   const t = useTranslations('language');
   const router = useRouter();
 
+  const handleLanguageChange = (value: string) => {
+    setLocale(value);
+    router.refresh();
+  };
+
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant='ghost' size='icon'>
-          <Icon icon={`flagpack:${country?.alpha2.toLowerCase()}`} className='!size-5' />
-          <span className='sr-only'>Switch Language</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align='end'>
+    <Select defaultValue={locale} onValueChange={handleLanguageChange}>
+      <SelectTrigger className='hover:bg-accent hover:text-accent-foreground w-auto border-none bg-transparent p-2 focus:ring-0 [&>svg]:hidden'>
+        <SelectValue>
+          <div className='flex items-center'>
+            <Icon icon={`flagpack:${country?.alpha2.toLowerCase()}`} className='!size-5' />
+            <span className='sr-only'>{t(`${locale}`)}</span>
+          </div>
+        </SelectValue>
+      </SelectTrigger>
+      <SelectContent>
         {locales.map(getCountry).map((item) => (
-          <DropdownMenuItem
-            key={`${item?.lang}-${item?.alpha2}`}
-            onClick={() => {
-              setLocale(`${item?.lang}-${item?.alpha2}`);
-              router.refresh();
-            }}
-          >
-            <div className='flex items-center gap-1'>
-              <Icon icon={`flagpack:${item?.alpha2.toLowerCase()}`} />
+          <SelectItem key={`${item?.lang}-${item?.alpha2}`} value={`${item?.lang}-${item?.alpha2}`}>
+            <div className='flex items-center gap-2'>
+              <Icon icon={`flagpack:${item?.alpha2.toLowerCase()}`} className='!size-5' />
               {t(`${item?.lang}-${item?.alpha2}`)}
             </div>
-          </DropdownMenuItem>
+          </SelectItem>
         ))}
-      </DropdownMenuContent>
-    </DropdownMenu>
+      </SelectContent>
+    </Select>
   );
 }

apps/admin/config/constants.ts

@@ -22,7 +22,7 @@ export const locales = [
   'uk-UA',
   'vi-VN',
   'zh-CN',
-  'zh-TW',
+  'zh-HK',
 ];
 
 export const NEXT_PUBLIC_DEFAULT_LANGUAGE = env('NEXT_PUBLIC_DEFAULT_LANGUAGE') || locales[0];

apps/admin/locales/cs-CZ/language.json

@@ -20,5 +20,5 @@
   "uk-UA": "Ukrajinština",
   "vi-VN": "Vietnamština",
   "zh-CN": "čeština (CS)",
-  "zh-TW": "čínština (tradiční)"
+  "zh-HK": "čínština (tradiční)"
 }

apps/admin/locales/de-DE/language.json

@@ -20,5 +20,5 @@
   "uk-UA": "Ukrainisch",
   "vi-VN": "Vietnamesisch",
   "zh-CN": "Chinesisch (vereinfacht)",
-  "zh-TW": "Chinesisch (Traditionell)"
+  "zh-HK": "Chinesisch (Traditionell)"
 }

apps/admin/locales/en-US/language.json

@@ -20,5 +20,5 @@
   "uk-UA": "Ukrainian",
   "vi-VN": "Vietnamese",
   "zh-CN": "Chinese (Simplified)",
-  "zh-TW": "Chinese (Traditional)"
+  "zh-HK": "Chinese (Traditional)"
 }

apps/admin/locales/es-ES/language.json

@@ -20,5 +20,5 @@
   "uk-UA": "Ucraniano",
   "vi-VN": "Vietnamita",
   "zh-CN": "Español (España)",
-  "zh-TW": "chino (tradicional)"
+  "zh-HK": "chino (tradicional)"
 }

apps/admin/locales/es-MX/language.json

@@ -20,5 +20,5 @@
   "uk-UA": "Ucraniano",
   "vi-VN": "Vietnamita",
   "zh-CN": "español (México)",
-  "zh-TW": "Chino (Tradicional)"
+  "zh-HK": "Chino (Tradicional)"
 }

apps/admin/locales/fi-FI/language.json

@@ -20,5 +20,5 @@
   "uk-UA": "ukrainaksi",
   "vi-VN": "vietnamiksi",
   "zh-CN": "kiina (yksinkertaistettu)",
-  "zh-TW": "kiina (perinteinen)"
+  "zh-HK": "kiina (perinteinen)"
 }

apps/admin/locales/fr-FR/language.json

@@ -20,5 +20,5 @@
   "uk-UA": "Ukrainien",
   "vi-VN": "Vietnamien",
   "zh-CN": "français (France)",
-  "zh-TW": "chinois (traditionnel)"
+  "zh-HK": "chinois (traditionnel)"
 }

apps/admin/locales/hi-IN/language.json

@@ -20,5 +20,5 @@
   "uk-UA": "यूक्रेनी",
   "vi-VN": "वियतनामी",
   "zh-CN": "चीनी (सरल)",
-  "zh-TW": "चीनी (पारंपरिक)"
+  "zh-HK": "चीनी (पारंपरिक)"
 }

apps/admin/locales/hu-HU/language.json

@@ -20,5 +20,5 @@
   "uk-UA": "ukrán",
   "vi-VN": "vietnámi",
   "zh-CN": "kínai (egyszerűsített)",
-  "zh-TW": "Kínai (hagyományos)"
+  "zh-HK": "Kínai (hagyományos)"
 }

apps/admin/locales/ja-JP/language.json

@@ -20,5 +20,5 @@
   "uk-UA": "ウクライナ語",
   "vi-VN": "ベトナム語",
   "zh-CN": "日本語",
-  "zh-TW": "中国語（繁体字）"
+  "zh-HK": "中国語（繁体字）"
 }

apps/admin/locales/ko-KR/language.json

@@ -20,5 +20,5 @@
   "uk-UA": "우크라이나어",
   "vi-VN": "베트남어",
   "zh-CN": "중국어(간체)",
-  "zh-TW": "중국어(번체)"
+  "zh-HK": "중국어(번체)"
 }

apps/admin/locales/no-NO/language.json

@@ -20,5 +20,5 @@
   "uk-UA": "Ukrainsk",
   "vi-VN": "Vietnamesisk",
   "zh-CN": "Kinesisk (forenklet)",
-  "zh-TW": "Kinesisk (tradisjonell)"
+  "zh-HK": "Kinesisk (tradisjonell)"
 }

apps/admin/locales/pl-PL/language.json

@@ -20,5 +20,5 @@
   "uk-UA": "ukraiński",
   "vi-VN": "język wietnamski",
   "zh-CN": "chiński (uproszczony)",
-  "zh-TW": "chiński (tradycyjny)"
+  "zh-HK": "chiński (tradycyjny)"
 }

apps/admin/locales/pt-BR/language.json

@@ -20,5 +20,5 @@
   "uk-UA": "Ucraniano",
   "vi-VN": "Vietnamita",
   "zh-CN": "Chinês (Simplificado)",
-  "zh-TW": "Chinês (Tradicional)"
+  "zh-HK": "Chinês (Tradicional)"
 }

apps/admin/locales/ro-RO/language.json

@@ -20,5 +20,5 @@
   "uk-UA": "Ucraineană",
   "vi-VN": "Vietnameză",
   "zh-CN": "Chineză (Simplificată)",
-  "zh-TW": "Chineză (tradițională)"
+  "zh-HK": "Chineză (tradițională)"
 }

apps/admin/locales/ru-RU/language.json

@@ -20,5 +20,5 @@
   "uk-UA": "Украинский",
   "vi-VN": "вьетнамский",
   "zh-CN": "Китайский (упрощенный)",
-  "zh-TW": "китайский (традиционный)"
+  "zh-HK": "китайский (традиционный)"
 }

apps/admin/locales/th-TH/language.json

@@ -20,5 +20,5 @@
   "uk-UA": "ยูเครน",
   "vi-VN": "ภาษาเวียดนาม",
   "zh-CN": "ภาษาไทย",
-  "zh-TW": "ภาษาจีน (ตัวเต็ม)"
+  "zh-HK": "ภาษาจีน (ตัวเต็ม)"
 }

apps/admin/locales/tr-TR/language.json

@@ -20,5 +20,5 @@
   "uk-UA": "Ukraynaca",
   "vi-VN": "Vietnamca",
   "zh-CN": "Çince (Basitleştirilmiş)",
-  "zh-TW": "Çince (Geleneksel)"
+  "zh-HK": "Çince (Geleneksel)"
 }

apps/admin/locales/uk-UA/language.json

@@ -20,5 +20,5 @@
   "uk-UA": "українська мова",
   "vi-VN": "В'єтнамська",
   "zh-CN": "українська (Україна)",
-  "zh-TW": "китайська (традиційна)"
+  "zh-HK": "китайська (традиційна)"
 }

apps/admin/locales/vi-VN/language.json

@@ -20,5 +20,5 @@
   "uk-UA": "Tiếng Ukraina",
   "vi-VN": "Tiếng Việt",
   "zh-CN": "Tiếng Trung (Giản thể)",
-  "zh-TW": "Tiếng Trung (Phồn thể)"
+  "zh-HK": "Tiếng Trung (Phồn thể)"
 }

apps/admin/locales/zh-CN/language.json

@@ -20,5 +20,5 @@
   "uk-UA": "乌克兰语",
   "vi-VN": "越南语",
   "zh-CN": "中文(简体)",
-  "zh-TW": "中文(繁体)"
+  "zh-HK": "中文(繁体)"
 }

apps/admin/locales/zh-TW/language.json → apps/admin/locales/zh-HK/language.json

@@ -19,6 +19,6 @@
   "tr-TR": "土耳其語",
   "uk-UA": "烏克蘭語",
   "vi-VN": "越南語",
-  "zh-CN": "中文(繁體)",
-  "zh-TW": "中文（繁體）"
+  "zh-CN": "中文(简体)",
+  "zh-HK": "中文(繁體)"
 }

apps/user/.i18nrc.json

@@ -33,6 +33,6 @@
     "uk-UA",
     "vi-VN",
     "zh-CN",
-    "zh-TW"
+    "zh-HK"
   ]
 }

apps/user/components/language-switch.tsx

@@ -4,13 +4,7 @@ import { locales } from '@/config/constants';
 import { setLocale } from '@/utils/common';
 import { Icon } from '@iconify/react';
 import { getCountry } from '@repo/ui/utils';
-import { Button } from '@shadcn/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@shadcn/ui/dropdown-menu';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@shadcn/ui/select';
 import { useLocale, useTranslations } from 'next-intl';
 import { useRouter } from 'next/navigation';
 
@@ -20,30 +14,31 @@ export default function LanguageSwitch() {
   const t = useTranslations('language');
   const router = useRouter();
 
+  const handleLanguageChange = (value: string) => {
+    setLocale(value);
+    router.refresh();
+  };
+
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant='ghost' size='icon'>
-          <Icon icon={`flagpack:${country?.alpha2.toLowerCase()}`} className='!size-5' />
-          <span className='sr-only'>Switch Language</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align='end'>
+    <Select defaultValue={locale} onValueChange={handleLanguageChange}>
+      <SelectTrigger className='hover:bg-accent hover:text-accent-foreground w-auto border-none bg-transparent p-2 focus:ring-0 [&>svg]:hidden'>
+        <SelectValue>
+          <div className='flex items-center'>
+            <Icon icon={`flagpack:${country?.alpha2.toLowerCase()}`} className='!size-5' />
+            <span className='sr-only'>{t(`${locale}`)}</span>
+          </div>
+        </SelectValue>
+      </SelectTrigger>
+      <SelectContent>
         {locales.map(getCountry).map((item) => (
-          <DropdownMenuItem
-            key={`${item?.lang}-${item?.alpha2}`}
-            onClick={() => {
-              setLocale(`${item?.lang}-${item?.alpha2}`);
-              router.refresh();
-            }}
-          >
-            <div className='flex items-center gap-1'>
-              <Icon icon={`flagpack:${item?.alpha2.toLowerCase()}`} />
+          <SelectItem key={`${item?.lang}-${item?.alpha2}`} value={`${item?.lang}-${item?.alpha2}`}>
+            <div className='flex items-center gap-2'>
+              <Icon icon={`flagpack:${item?.alpha2.toLowerCase()}`} className='!size-5' />
               {t(`${item?.lang}-${item?.alpha2}`)}
             </div>
-          </DropdownMenuItem>
+          </SelectItem>
         ))}
-      </DropdownMenuContent>
-    </DropdownMenu>
+      </SelectContent>
+    </Select>
   );
 }

apps/user/config/constants.ts

@@ -22,7 +22,7 @@ export const locales = [
   'uk-UA',
   'vi-VN',
   'zh-CN',
-  'zh-TW',
+  'zh-HK',
 ];
 
 export const NEXT_PUBLIC_DEFAULT_LANGUAGE = env('NEXT_PUBLIC_DEFAULT_LANGUAGE') || locales[0];

apps/user/locales/cs-CZ/language.json

@@ -20,5 +20,5 @@
   "uk-UA": "Ukrajinština",
   "vi-VN": "Vietnamština",
   "zh-CN": "čeština (CS)",
-  "zh-TW": "čínština (tradiční)"
+  "zh-HK": "čínština (tradiční)"
 }

apps/user/locales/de-DE/language.json

@@ -20,5 +20,5 @@
   "uk-UA": "Ukrainisch",
   "vi-VN": "Vietnamesisch",
   "zh-CN": "Chinesisch (vereinfacht)",
-  "zh-TW": "Chinesisch (Traditionell)"
+  "zh-HK": "Chinesisch (Traditionell)"
 }

apps/user/locales/en-US/language.json

@@ -20,5 +20,5 @@
   "uk-UA": "Ukrainian",
   "vi-VN": "Vietnamese",
   "zh-CN": "Chinese (Simplified)",
-  "zh-TW": "Chinese (Traditional)"
+  "zh-HK": "Chinese (Traditional)"
 }

apps/user/locales/es-ES/language.json

@@ -20,5 +20,5 @@
   "uk-UA": "Ucraniano",
   "vi-VN": "Vietnamita",
   "zh-CN": "chino (simplificado)",
-  "zh-TW": "chino (tradicional)"
+  "zh-HK": "chino (tradicional)"
 }

apps/user/locales/es-MX/language.json

@@ -20,5 +20,5 @@
   "uk-UA": "Ucraniano",
   "vi-VN": "Vietnamita",
   "zh-CN": "español (México)",
-  "zh-TW": "Chino (Tradicional)"
+  "zh-HK": "Chino (Tradicional)"
 }

apps/user/locales/fi-FI/language.json

@@ -20,5 +20,5 @@
   "uk-UA": "ukrainaksi",
   "vi-VN": "Vietnamin kieli",
   "zh-CN": "kiina (yksinkertaistettu)",
-  "zh-TW": "kiina (perinteinen)"
+  "zh-HK": "kiina (perinteinen)"
 }

apps/user/locales/fr-FR/language.json

@@ -20,5 +20,5 @@
   "uk-UA": "Ukrainien",
   "vi-VN": "Vietnamien",
   "zh-CN": "français (France)",
-  "zh-TW": "Chinois (traditionnel)"
+  "zh-HK": "Chinois (traditionnel)"
 }

apps/user/locales/hi-IN/language.json

@@ -20,5 +20,5 @@
   "uk-UA": "यूक्रेनी",
   "vi-VN": "वियतनामी",
   "zh-CN": "हिन्दी (भारत)",
-  "zh-TW": "चीनी (पारंपरिक)"
+  "zh-HK": "चीनी (पारंपरिक)"
 }

apps/user/locales/hu-HU/language.json

@@ -20,5 +20,5 @@
   "uk-UA": "ukrán",
   "vi-VN": "vietnámi",
   "zh-CN": "kínai (egyszerűsített)",
-  "zh-TW": "Kínai (hagyományos)"
+  "zh-HK": "Kínai (hagyományos)"
 }

apps/user/locales/ja-JP/language.json

@@ -20,5 +20,5 @@
   "uk-UA": "ウクライナ語",
   "vi-VN": "ベトナム語",
   "zh-CN": "日本語",
-  "zh-TW": "中国語(繁体)"
+  "zh-HK": "中国語(繁体)"
 }