🐛 fix(locale): Language Select

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>
   );
 }