From 6cd531eec0f3c675c4dc201526f887c3baacaab3 Mon Sep 17 00:00:00 2001
From: Sawan <sawankushwah457@gmail.com>
Date: Fri, 18 Oct 2024 11:11:37 +0530
Subject: [PATCH] Added google translator with more international language

---
 .../src/components/Shared/GoogleTranslate.jsx |  87 ----------
 .../src/components/Shared/footer/Content.jsx  |   9 +-
 .../src/components/Shared/footer/Google.jsx   | 148 ++++++++++++++++++
 3 files changed, 152 insertions(+), 92 deletions(-)
 delete mode 100644 frontend/src/components/Shared/GoogleTranslate.jsx
 create mode 100644 frontend/src/components/Shared/footer/Google.jsx

diff --git a/frontend/src/components/Shared/GoogleTranslate.jsx b/frontend/src/components/Shared/GoogleTranslate.jsx
deleted file mode 100644
index 8ba941fe..00000000
--- a/frontend/src/components/Shared/GoogleTranslate.jsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import React, { useEffect } from "react";
-
-const GoogleTranslate = () => {
-    useEffect(() => {
-        let retryCount = 0;
-        const maxRetries = 50; // Adjust as needed
-
-        window.googleTranslateInit = () => {
-            if (!window.google?.translate?.TranslateElement) {
-                if (retryCount < maxRetries) {
-                    retryCount++;
-                } else {
-                    console.error('Failed to initialize Google Translate after maximum retries.');
-                }
-                setTimeout(window.googleTranslateInit, 100);
-            } else {
-                new window.google.translate.TranslateElement({
-                    pageLanguage: 'en',
-                    includedLanguages: 'en,hi,pa,sa,mr,ur,bn,es,ja,ko,zh-CN,nl,fr,de,it,ta,te',
-                    layout: window.google.translate.TranslateElement.InlineLayout.VERTICAL,
-                    defaultLanguage: 'en',
-                    autoDisplay: false,
-                }, 'google_element');
-            }
-        };
-
-        const loadGoogleTranslateScript = () => {
-            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=googleTranslateInit";
-                script.id = "google_translate_script";
-                script.onerror = () => console.error('Error loading Google Translate script');
-                document.body.appendChild(script);
-            }
-        };
-
-        loadGoogleTranslateScript();
-
-        if (window.google?.translate) {
-            window.googleTranslateInit();
-        }
-
-        return () => {
-            // Cleanup logic if necessary
-        };
-    }, []);
-
-    return (
-        <div id="google_element" className="pl-20 md:pl-0">
-            <style jsx>{`
-                .goog-te-combo {
-                    @apply w-full bg-white border border-gray-300 rounded px-2 py-1 text-sm;
-                }
-                .goog-te-gadget {
-                    @apply flex flex-col items-start text-xs text-gray-500;
-                }
-                .goog-te-gadget > div {
-                    @apply w-full mb-1;
-                }
-                .goog-te-gadget > span {
-                    @apply flex flex-col items-start;
-                }
-                .goog-te-gadget .goog-logo-link {
-                    @apply flex items-center;
-                }
-                .goog-te-gadget .goog-logo-link img {
-                    @apply ml-1;
-                }
-                .goog-te-gadget > span > a:last-child {
-                    @apply mt-[-2px];
-                }
-                .goog-te-banner-frame {
-                    @apply hidden !important;
-                }
-                .goog-te-menu-frame {
-                    @apply max-h-96 overflow-y-auto bg-white border border-gray-300 rounded;
-                }
-                .skiptranslate > iframe {
-                    @apply h-0 border-none shadow-none;
-                }
-            `}</style>
-        </div>
-    );
-};
-
-export default GoogleTranslate;
\ No newline at end of file
diff --git a/frontend/src/components/Shared/footer/Content.jsx b/frontend/src/components/Shared/footer/Content.jsx
index d3b8a8e0..fbf0e7d2 100644
--- a/frontend/src/components/Shared/footer/Content.jsx
+++ b/frontend/src/components/Shared/footer/Content.jsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import Logo from '../../../assets/Logo/playcafe.png';
 import googleImage from '../../../assets/img/google.png';
 import { FaFacebook, FaInstagram, FaTiktok, FaGithub } from 'react-icons/fa';
-import GoogleTranslate from '../GoogleTranslate';
+import Google from './Google';
 
 export default function Content() {
   return (
@@ -38,9 +38,8 @@ const Section2 = () => {
         </div>
       )}
       <div
-        className={`flex ${
-          isWide ? 'justify-between items-end' : 'flex-col items-center'
-        } text-white`}
+        className={`flex ${isWide ? 'justify-between items-end' : 'flex-col items-center'
+          } text-white`}
       >
         <h1
           className={`${isWide ? 'text-[9vw]' : 'text-[12vw]'} leading-[0.8]`}
@@ -155,7 +154,7 @@ const Nav = () => {
             className="w-[2rem] h-[2rem] mr-[65px]"
           />
         </div> */}
-        <GoogleTranslate />
+        <Google />
       </div>
     </div>
   );
diff --git a/frontend/src/components/Shared/footer/Google.jsx b/frontend/src/components/Shared/footer/Google.jsx
new file mode 100644
index 00000000..33443e9b
--- /dev/null
+++ b/frontend/src/components/Shared/footer/Google.jsx
@@ -0,0 +1,148 @@
+import React, { useEffect } from "react";
+
+const Google = () => {
+    useEffect(() => {
+        window.GoogleInit = () => {
+            if (!window.google?.translate?.TranslateElement) {
+                setTimeout(window.GoogleInit, 100);
+            } else {
+                new window.google.translate.TranslateElement({
+                    pageLanguage: 'en',
+                    includedLanguages: 'en,hi,ur,es,ja,ko,zh-CN,nl,fr,de,it,ta,te,ru,ar,pt,th',
+                    layout: window.google.translate.TranslateElement.InlineLayout.HORIZONTAL,
+                    defaultLanguage: 'en',
+                    autoDisplay: false,
+                }, 'google_element');
+            }
+            cleanUpGadgetText();
+        };
+
+        const loadGoogleScript = () => {
+            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=GoogleInit";
+                script.id = "google_translate_script";
+                script.onerror = () => console.error('Error loading Google Translate script');
+                document.body.appendChild(script);
+            }
+
+        };
+        const cleanUpGadgetText = () => {
+            const gadgetElement = document.querySelector('.goog-te-gadget');
+            if (gadgetElement) {
+                const textNodes = gadgetElement.childNodes;
+                textNodes.forEach((node) => {
+                    if (node.nodeType === Node.TEXT_NODE) {
+                        node.textContent = ''; // Clear text content
+                    }
+                });
+            }
+        };
+        loadGoogleScript();
+
+        if (window.google && window.google.translate) {
+            window.GoogleInit();
+        }
+
+        return () => {
+            // Cleanup logic if necessary
+        };
+    }, []);
+
+    return (
+        <div id="google_element" className="google-translate-container">
+            <style jsx>{`
+                    .goog-te-combo {
+                        background-color: #f0f8ff; /* Soft blue background */
+                        border-radius: 0.3rem; /* Rounded corners */
+                        padding: 0.5rem;
+                        font-size: 1.175rem;     
+                        transition: all 0.3s ease-in-out; /* Smooth transition */
+                        outline: none;
+                        color: #007bff; /* Blue text */
+                        font-weight: 500; /* Tailwind: font-medium */
+                        cursor: pointer;
+                        text-align:center;
+                    }
+
+                    .goog-te-combo:hover {
+                        background-color: #e6f0ff; /* Lighter blue on hover */
+                        border-color: #0056b3; /* Darker blue on hover */
+                        color: #0056b3; /* Darker blue text */
+                        transform: scale(1.05); /* Slight scale effect */
+                    }
+
+                    .goog-logo-link {
+                        display: none !important; /* Hide Google logo */
+                    }
+
+                    .goog-te-gadget {
+                        color: transparent !important;
+                    }
+
+                    .goog-te-gadget > span > a {
+                        display: none !important;
+                    }
+
+                    .goog-te-gadget .goog-te-combo {
+                        color: #004d43 !important; /* Blue text */
+                    }
+
+                    .goog-te-gadget .goog-te-combo:hover {
+                        color: #004d53 !important; /* Darker blue text on hover */
+                    }
+
+                    #google_translate_element .goog-te-gadget-simple .goog-te-menu-value span:first-child {
+                        display: none;
+                    }
+
+                    #google_translate_element .goog-te-gadget-simple .goog-te-menu-value:before {
+                        content: 'Translate'; /* Custom text */
+                        color: #007bff; /* Blue text */
+                        font-weight: 600; /* Slightly bolder */
+                    }
+
+                    .goog-te-banner-frame {
+                        display: none !important; /* Hide the banner frame */
+                    }
+
+                    .goog-te-menu-frame {
+                        max-height: 400px !important;
+                        overflow-y: auto !important;
+                        background-color: #ffffff; /* White background for dropdown */
+                        border: 2px solid #007bff; /* Blue border */
+                        border-radius: 0.75rem; /* Rounded corners */
+                        box-shadow: 0 4px 8px rgba(0, 123, 255, 0.1); /* Soft blue shadow */
+                    }
+
+                    /* Customize the iframe */
+                    .skiptranslate > iframe {
+                        height: 0 !important;
+                        border-style: none;
+                        box-shadow: none;
+                    }
+
+                    body {
+                        position: relative !important;
+                        top: 0 !important;
+                        background-color: #f8faff; /* Light blue background for website */
+                        color: #333; /* Default text color */
+                        font-family: 'Inter', sans-serif; /* Clean font for readability */
+                    }
+
+                    /* Extra hover effects for any clickable elements */
+                    a, button {
+                        transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, transform 0.3s ease;
+                    }
+
+                    a:hover, button:hover {
+                        color: #0056b3; /* Darker blue on hover */
+                        transform: translateY(-3px); /* Slight lift on hover */
+                    }
+                `}</style>
+        </div>
+    );
+};
+
+export default Google;