Updates

components/ui/locale-switcher/locale-switcher.tsx

@@ -1,12 +1,13 @@
 'use client';
 
-import LanguageIcon from 'components/icons/language';
 import {
   DropdownMenu,
   DropdownMenuContent,
+  DropdownMenuItem,
   DropdownMenuTrigger
-} from 'components/ui/dropdown/dropdown';
-import { useLocale } from 'next-intl';
+} from '@/components/ui/dropdown-menu';
+import LanguageIcon from 'components/icons/language';
+import { useLocale, useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useState } from 'react';
@@ -23,6 +24,7 @@ import { supportedLanguages } from '../../../i18n-config';
 export default function LocaleSwitcher() {
   const pathName = usePathname();
   const currentLocale = useLocale();
+  const t = useTranslations('ui');
 
   // const translations = localeData.translations;
 
@@ -47,40 +49,34 @@ export default function LocaleSwitcher() {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
-    <div>
+    <>
       <DropdownMenu open={isOpen} onOpenChange={() => setIsOpen(!isOpen)}>
-        <DropdownMenuTrigger asChild>
-          <button
-            className={
-              'flex shrink-0 items-center justify-center space-x-1 rounded bg-app p-2 text-xs font-semibold uppercase outline-none ring-2 ring-transparent transition duration-200 hover:ring-ui-border focus:ring-ui-border'
-            }
-            aria-label="Language selector"
-          >
-            <LanguageIcon className="h-6 w-6" />
-            <span>{currentLocale}</span>
-          </button>
+        <DropdownMenuTrigger
+          className="relative flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors"
+          aria-label={t('languageSelector')}
+        >
+          <LanguageIcon className="h-6 w-6" />
+          <span className="sr-only">{currentLocale}</span>
         </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" className="drop-shadow-xl">
+        <DropdownMenuContent align="end" className="bg-app">
           <ul className="">
             {supportedLanguages.locales.map((locale) => {
-              if (currentLocale === locale.id) {
-                return;
-              } else {
-                return (
-                  <li className="" key={locale.id}>
-                    <Link
-                      className="flex w-full cursor-pointer px-4 py-2 text-sm"
-                      href={redirectedPathName(locale.id)}
-                    >
-                      {locale.title}
-                    </Link>
-                  </li>
-                );
-              }
+              return (
+                <DropdownMenuItem className="p-0" key={locale.id}>
+                  <Link
+                    className={`flex w-full cursor-pointer items-center px-4 py-2 text-sm ${
+                      currentLocale == locale.id && 'font-bold'
+                    }`}
+                    href={redirectedPathName(locale.id)}
+                  >
+                    {locale.title}
+                  </Link>
+                </DropdownMenuItem>
+              );
             })}
           </ul>
         </DropdownMenuContent>
       </DropdownMenu>
-    </div>
+    </>
   );
 }