Multilang supp Addn PR ( #141 ) from sezallagwal/add/gtranslator

added multilanguage support
4darsh-Dev · Oct 28, 2024 · 222979d · 222979d
2 parents 6c17f03 + 282584c
commit 222979d
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 2 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -9,6 +9,20 @@
     <body>
         <div id="root"></div>
         <script type="module" src="/src/main.jsx"></script>
+
+        <div class="gtranslate_wrapper"></div>
+
+        <script>
+            window.gtranslateSettings = {
+                default_language: 'en',
+                detect_browser_language: true,
+                wrapper_selector: '.gtranslate_wrapper',
+            }
+        </script>
+
+        <script
+            src="https://cdn.gtranslate.net/widgets/latest/float.js"
+            defer
+        ></script>
     </body>
-    <head></head>
 </html>
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -1,3 +1,4 @@
+
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { useEffect, useState } from 'react';
 import HomePage from './pages/HomePage';
@@ -11,7 +12,9 @@ import CreateNFT from './pages/CreateNFTPage';
 import NotFoundPage from './components/NotFoundPage';
 import Footer from './components/Footer';
 import MyChatbot from './Chatbot';
-import CustomCursor from './components/CustomCursor'; // Import CustomCursor component
+import CustomCursor from './components/CustomCursor';
+import GTranslateLoader from './components/GTranslateLoader'
+
 
 function App() {
     const [wallet, setWallet] = useState(null);
@@ -53,6 +56,7 @@ function App() {
                 <MyChatbot />
                 <Footer />
             </div>
+            <GTranslateLoader />
         </BrowserRouter>
     );
 }

diff --git a/frontend/src/components/GTranslateLoader.js b/frontend/src/components/GTranslateLoader.js
@@ -0,0 +1,31 @@
+"use client";
+
+import { useEffect } from "react";
+
+export default function GTranslateLoader() {
+  useEffect(() => {
+    // Create the inline script for gtranslateSettings
+    const gtranslateSettingsScript = document.createElement("script");
+    gtranslateSettingsScript.innerHTML = `
+      window.gtranslateSettings = {
+        default_language: "en",
+        detect_browser_language: true,
+        wrapper_selector: ".gtranslate_wrapper"
+      };
+    `;
+    document.body.appendChild(gtranslateSettingsScript);
+
+    // Load the Google Translate widget script
+    const gtranslateLibraryScript = document.createElement("script");
+    gtranslateLibraryScript.src = "https://cdn.gtranslate.net/widgets/latest/float.js";
+    gtranslateLibraryScript.defer = true;
+    document.body.appendChild(gtranslateLibraryScript);
+
+    return () => {
+      document.body.removeChild(gtranslateSettingsScript);
+      document.body.removeChild(gtranslateLibraryScript);
+    };
+  }, []);
+
+  return null;
+}