From c305ddf6a7b0aee7554087866dc185f8131aa5f5 Mon Sep 17 00:00:00 2001
From: shakil hossain <sh9743441@gmail.com>
Date: Fri, 15 Aug 2025 17:02:47 +0600
Subject: [PATCH] use google translate to translate page

---
 src/app/[route]/layout.tsx             |  4 +-
 src/app/globals.css                    | 52 +++++++++++++--
 src/app/page.tsx                       |  4 +-
 src/components/Navbar.tsx              |  4 +-
 src/components/google-translate.tsx    | 92 ++++++++++++++++++++++++++
 src/components/sign-in-navbar-link.tsx |  2 +-
 6 files changed, 146 insertions(+), 12 deletions(-)
 create mode 100644 src/components/google-translate.tsx

diff --git a/src/app/[route]/layout.tsx b/src/app/[route]/layout.tsx
index 592b4636..c64b03dc 100644
--- a/src/app/[route]/layout.tsx
+++ b/src/app/[route]/layout.tsx
@@ -18,7 +18,7 @@ import {
 import { notFound } from "next/navigation";
 import { SearchProvider } from "@/components/search-context";
 import { MainComponent } from "@/components/main-component";
-import GTranslateWrapper from "@/components/gtranslate-wrapper";
+// import GTranslateWrapper from "@/components/gtranslate-wrapper";
 import { GeoCoordinatesProvider } from "@/components/geo-context";
 
 export default function LocationsLayout({
@@ -34,7 +34,7 @@ export default function LocationsLayout({
 }) {
   return (
     <>
-      <GTranslateWrapper />
+      {/*<GTranslateWrapper />*/}
       <span>
         {RESOURCE_ROUTES.includes(route) ? (
           <>
diff --git a/src/app/globals.css b/src/app/globals.css
index 012ab8a1..05022c4e 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -313,10 +313,10 @@ a[href^="https://maps.google.com/maps"]{display:none !important} */
   }
 }
 
-div.skiptranslate,
-#google_translate_element {
-  display: none !important;
-}
+/*div.skiptranslate,*/
+/*#google_translate_element {*/
+/*  display: none !important;*/
+/*}*/
 
 body {
   top: 0 !important;
@@ -436,3 +436,47 @@ font {
 ::-webkit-scrollbar-thumb:hover {
   background: #555;
 }
+
+/* Make Google Translate dropdown visible */
+#google_translate_element {
+  display: inline-block;
+}
+
+.goog-te-gadget {
+  font-size: 12px !important;
+  color: #000 !important;
+}
+
+.goog-te-gadget-simple {
+  background-color: #f4f4f4 !important;
+  border: 1px solid #d5d5d5 !important;
+  padding: 4px 6px !important;
+  border-radius: 4px !important;
+  display: inline-block !important;
+  cursor: pointer;
+}
+
+.goog-te-gadget-simple span {
+  color: #000 !important;
+}
+
+.goog-te-gadget img {
+  display: inline !important;
+}
+
+/* Hide Google’s top banner */
+.goog-te-banner-frame.skiptranslate {
+  display: none !important;
+}
+body {
+  top: 0px !important;
+}
+
+.skiptranslate {
+  display: none !important;
+  visibility: hidden !important;
+}
+html,
+body {
+  margin-top: 0 !important;
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 1a25aaf1..2f76552a 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -8,7 +8,6 @@ import type { Metadata } from "next";
 import { Footer } from "../components/footer";
 import Link from "next/link";
 import Navbar from "@/components/Navbar";
-import GTranslateWrapper from "@/components/gtranslate-wrapper";
 import { TranslatableText } from "@/components/translatable-text";
 
 export const metadata: Metadata = {
@@ -20,7 +19,7 @@ export const metadata: Metadata = {
 export default function HomePage() {
   return (
     <>
-      <GTranslateWrapper />
+      {/*<GTranslateWrapper />*/}
       <Navbar background={false} />
 
       <div
@@ -556,7 +555,6 @@ export default function HomePage() {
           </div>
         </div>
       </section>
-
       <Footer />
     </>
   );
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index e950ef35..8dfbad89 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -8,9 +8,9 @@
 
 import React, { useEffect, useState } from "react";
 import OffCanvasMenu from "./OffCanvasMenu";
-import { GTranslateSelect } from "./gtranslate-select";
 import "@aws-amplify/ui-react/styles.css";
 import { SignInNavbarLink } from "./sign-in-navbar-link";
+import GoogleTranslate from "@/components/google-translate";
 
 export default function Navbar({ background = true }: { background: boolean }) {
   const [open, setOpen] = useState(false);
@@ -68,7 +68,7 @@ export default function Navbar({ background = true }: { background: boolean }) {
             </a>
           </div>
           <div className="flex items-center space-x-2">
-            <GTranslateSelect />
+            <GoogleTranslate />
             <SignInNavbarLink />
           </div>
         </nav>
diff --git a/src/components/google-translate.tsx b/src/components/google-translate.tsx
new file mode 100644
index 00000000..54d52280
--- /dev/null
+++ b/src/components/google-translate.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+const languages = [
+  { code: "en", name: "English" },
+  { code: "es", name: "Español" },
+  { code: "zh-CN", name: "中文" },
+  { code: "bn", name: "বাংলা" },
+  { code: "fr", name: "Français" },
+  { code: "ru", name: "Русский" },
+  { code: "ff", name: "Fulfulde" },
+  { code: "wo", name: "Wolof" },
+];
+
+declare global {
+  interface Window {
+    googleTranslateElementInit: () => void;
+    google: any;
+  }
+}
+
+export default function LanguageSelector() {
+  const [selected, setSelected] = useState("en");
+
+  useEffect(() => {
+    const savedLang = localStorage.getItem("selectedLanguage");
+    if (savedLang) {
+      setSelected(savedLang);
+    }
+
+    window.googleTranslateElementInit = () => {
+      new window.google.translate.TranslateElement(
+        {
+          pageLanguage: "en",
+          includedLanguages: languages.map((l) => l.code).join(","),
+        },
+        "google_translate_element",
+      );
+    };
+
+    if (!document.getElementById("google-translate-script")) {
+      const script = document.createElement("script");
+      script.id = "google-translate-script";
+      script.src =
+        "https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";
+      script.async = true;
+      document.body.appendChild(script);
+    }
+  }, []);
+
+  const changeLanguage = (lang: string) => {
+    setSelected(lang);
+    localStorage.setItem("selectedLanguage", lang);
+
+    const tryChange = () => {
+      const selectEl =
+        document.querySelector<HTMLSelectElement>(".goog-te-combo");
+      if (selectEl) {
+        selectEl.value = lang;
+        const event = new Event("change", { bubbles: true });
+        selectEl.dispatchEvent(event);
+      } else {
+        setTimeout(tryChange, 100);
+      }
+    };
+
+    setTimeout(tryChange, 200);
+  };
+
+  useEffect(() => {
+    console.log(selected);
+  }, []);
+
+  return (
+    <div>
+      <div id="google_translate_element" style={{ display: "none" }} />
+
+      <select
+        value={selected}
+        onChange={(e) => changeLanguage(e.target.value)}
+        className="border-none bg-transparent w-28 text-sm font-medium rounded p-2 notranslate"
+      >
+        {languages.map((lang) => (
+          <option key={lang.code} value={lang.code}>
+            {lang.name}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}
diff --git a/src/components/sign-in-navbar-link.tsx b/src/components/sign-in-navbar-link.tsx
index 03744232..a632a69d 100644
--- a/src/components/sign-in-navbar-link.tsx
+++ b/src/components/sign-in-navbar-link.tsx
@@ -22,7 +22,7 @@ function SignInNavbarLinkWrapper() {
   return user ? (
     <DropdownMenu>
       <DropdownMenuTrigger className="flex gap-2 items-center text-neutral-800">
-        <span className="max-w-14 truncate">{user.username}</span>
+        <span className="max-w-14 truncate notranslate">{user.username}</span>
         <UserCircle className="w-5 h-5" />
       </DropdownMenuTrigger>
       <DropdownMenuContent>