fix: Locale switcher

src/components/Header/Header.tsx

@@ -1,13 +1,10 @@
 "use client";
 import { navigation } from "~/constants";
-// import Button from "../design/Button";
-// import MenuSvg from "~/assets/svg/MenuSvg";
 import { useTranslations } from "next-intl";
 import LocaleLink from "../ui/LocaleLink";
 import LocalSwitcher from "./LocaleSwitcher";
 import styles from "./styles.module.css";
 import { usePathname } from "next/navigation";
-import { useEffect } from "react";
 
 const Header = () => {
   const t = useTranslations("links");
@@ -42,9 +39,7 @@ const Header = () => {
           ))}
         </div>
         <div className="flex gap-6 justify-center items-center">
-          <button className="subheading font-medium text-gray-900 hover:text-secondary-800 hover:scale-105 transition-all duration-150 ease-linear align-middle p-2">
-            {router.split("/")[1] === "en" ? "ಕ" : "en"}
-          </button>
+          <LocalSwitcher />
           <MobileNav />
         </div>
       </div>

src/components/Header/LocaleSwitcher.tsx

@@ -1,31 +1,26 @@
-'use client';
-import { useLocale } from 'next-intl';
-import { useRouter } from 'next/navigation';
-import { ChangeEvent, useTransition } from 'react';
+"use client";
+import { useLocale } from "next-intl";
+import { usePathname, useRouter } from "next/navigation";
+import { ChangeEvent, useTransition } from "react";
 
 export default function LocalSwitcher() {
   const [isPending, startTransition] = useTransition();
   const router = useRouter();
+  const path = usePathname();
   const localActive = useLocale();
 
-  const onSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {
-    const nextLocale = e.target.value;
+  const onClick = () => {
     startTransition(() => {
-      router.replace(`/${nextLocale}`);
+      router.push(localActive === "en" ? "kn" : "en");
+      router.refresh();
     });
   };
   return (
-    <label className='border-2 rounded m-2'>
-      <p className='sr-only'>change language</p>
-      <select
-        defaultValue={localActive}
-        className='bg-transparent py-2'
-        onChange={onSelectChange}
-        disabled={isPending}
-      >
-        <option value='en'>English</option>
-        <option value='kn'>Kannada</option>
-      </select>
-    </label>
+    <button
+      className="subheading font-medium text-gray-900 hover:text-secondary-800 hover:scale-105 transition-all duration-150 ease-linear align-middle p-2"
+      onClick={onClick}
+    >
+      {localActive === "en" ? "ಕ" : "en"}
+    </button>
   );
-}
+}