Remove redundant icons; make update selector

src/components/LocaleSwitcherSelect.tsx

@@ -1,7 +1,13 @@
 'use client';
 
-import { CheckIcon, LanguageIcon } from '@heroicons/react/24/solid';
-import * as Select from '@radix-ui/react-select';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from '@app/components/ui/dropdown-menu';
+import { Button } from '@app/components/ui/button';
+import { Check, Globe, Languages } from 'lucide-react';
 import clsx from 'clsx';
 import { useTransition } from 'react';
 import { Locale } from '@/i18n/config';
@@ -9,7 +15,7 @@ import { setUserLocale } from '@/services/locale';
 
 type Props = {
   defaultValue: string;
-  items: Array<{value: string; label: string}>;
+  items: Array<{ value: string; label: string }>;
   label: string;
 };
 
@@ -27,46 +33,37 @@ export default function LocaleSwitcherSelect({
     });
   }
 
+  const selected = items.find((item) => item.value === defaultValue);
+
   return (
-    <div className="relative">
-      <Select.Root defaultValue={defaultValue} onValueChange={onChange}>
-        <Select.Trigger
-          aria-label={label}
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
           className={clsx(
-            'rounded-sm p-2 transition-colors hover:bg-slate-200',
-            isPending && 'pointer-events-none opacity-60'
+            'rounded-sm p-2 transition-colors flex items-center gap-2',
+            isPending && 'pointer-events-none'
           )}
+          aria-label={label}
         >
-          <Select.Icon>
-            <LanguageIcon className="h-6 w-6 text-slate-600 transition-colors group-hover:text-slate-900" />
-          </Select.Icon>
-        </Select.Trigger>
-        <Select.Portal>
-          <Select.Content
-            align="end"
-            className="min-w-[8rem] overflow-hidden rounded-sm bg-white py-1 shadow-md"
-            position="popper"
+          <Languages className="h-4 w-4" />
+          <span >{selected?.label ?? label}</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="min-w-[8rem]">
+        {items.map((item) => (
+          <DropdownMenuItem
+            key={item.value}
+            onClick={() => onChange(item.value)}
+            className="flex items-center gap-2"
           >
-            <Select.Viewport>
-              {items.map((item) => (
-                <Select.Item
-                  key={item.value}
-                  className="flex cursor-default items-center px-3 py-2 text-base data-[highlighted]:bg-slate-100"
-                  value={item.value}
-                >
-                  <div className="mr-2 w-[1rem]">
-                    {item.value === defaultValue && (
-                      <CheckIcon className="h-5 w-5 text-slate-600" />
-                    )}
-                  </div>
-                  <span className="text-slate-900">{item.label}</span>
-                </Select.Item>
-              ))}
-            </Select.Viewport>
-            <Select.Arrow className="fill-white text-white" />
-          </Select.Content>
-        </Select.Portal>
-      </Select.Root>
-    </div>
+            {item.value === defaultValue && (
+              <Check className="h-4 w-4" />
+            )}
+            <span>{item.label}</span>
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 }