Merge pull request #185 from ParnaRoyChowdhury777/main

Issue #183 fixed. The language translator is now visible properly.

app/GoogleTranslate.tsx

@@ -1,36 +1,33 @@
 "use client";
 
 import React, { useEffect } from "react";
-import "./GoogleTranslate.css"; // Import the CSS file
+import Script from "next/script";
 
-const GoogleTranslate = () => {
-  useEffect(() => {
-    if (!document.getElementById("google_translate_script")) {
-      const script = document.createElement("script");
-      script.type = "text/javascript";
-      script.src = "https://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate";
-      script.id = "google_translate_script";
-      script.onerror = () => console.error('Error loading Google Translate script');
-      document.body.appendChild(script);
-
-      (window as any).loadGoogleTranslate = () => {
-        new (window as any).google.translate.TranslateElement({
-          pageLanguage: 'en',
-          includedLanguages: 'en,hi,pa,sa,mr,ur,bn,es,fr,de,it',
-          layout: (window as any).google.translate.TranslateElement.InlineLayout.SIMPLE,
-        }, 'google_element');
-      };
-    }
 
-    return () => {
-      const script = document.getElementById("google_translate_script");
-      if (script) {
-        document.body.removeChild(script);
-      }
-    };
-  }, []);
+const GoogleTranslate = () => {
+  return (
+    <div className="absolute top-[57px] md:top-12 z-[1] right-0">
+    <div id="google_element"></div>
+    <Script
+      src="https://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"
+      strategy="afterInteractive"
+    />
+    <Script
+      id="google-translate"
+      strategy="afterInteractive"
+      dangerouslySetInnerHTML={{
+        __html: `
+          function loadGoogleTranslate() {
+            new google.translate.TranslateElement({
+              pageLanguage: 'en'
+            }, 'google_element');
+          }
+        `,
+      }}
+    />
+  </div>
 
-  return <div id="google_element" className="google-translate-container"></div>;
+  );
 };
 
 export default GoogleTranslate;