Add Multilingual Translator #193
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||||
|---|---|---|---|---|---|---|---|---|
| @@ -0,0 +1,107 @@ | ||||||||
| import React, { useEffect } from "react"; | ||||||||
|
|
||||||||
| const GoogleTranslate = () => { | ||||||||
| useEffect(() => { | ||||||||
| window.googleTranslateInit = () => { | ||||||||
| if (!window.google?.translate?.TranslateElement) { | ||||||||
| 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,es,nl,fr,de,it,ta,te', | ||||||||
| layout: window.google.translate.TranslateElement.InlineLayout.HORIZONTAL, | ||||||||
| defaultLanguage: 'en', | ||||||||
| autoDisplay: false, | ||||||||
| }, 'google_element'); | ||||||||
| } | ||||||||
| }; | ||||||||
|
There was a problem hiding this comment. Prevent potential infinite retries in The Consider adding a retry limit or a timeout to prevent infinite retries. Here's how you might implement a retry limit: + let retryCount = 0;
+ const maxRetries = 50; // Adjust as needed
window.googleTranslateInit = () => {
if (!window.google?.translate?.TranslateElement) {
+ if (retryCount < maxRetries) {
+ retryCount++;
setTimeout(window.googleTranslateInit, 100);
+ } else {
+ console.error('Failed to initialize Google Translate after maximum retries.');
+ }
} else {
new window.google.translate.TranslateElement({
pageLanguage: 'en',Alternatively, you could implement a timeout mechanism: + const startTime = Date.now();
+ const timeout = 5000; // Timeout after 5 seconds
window.googleTranslateInit = () => {
if (!window.google?.translate?.TranslateElement) {
+ if (Date.now() - startTime < timeout) {
setTimeout(window.googleTranslateInit, 100);
+ } else {
+ console.error('Failed to initialize Google Translate within the timeout period.');
+ }
} else {
new window.google.translate.TranslateElement({
pageLanguage: 'en',
|
||||||||
|
|
||||||||
| 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 && window.google.translate) { | ||||||||
|
There was a problem hiding this comment. 🛠️ Refactor suggestion Simplify condition using optional chaining You can simplify the condition by using optional chaining, which enhances readability by concisely checking for the existence of Apply this diff to simplify the condition: - if (window.google && window.google.translate) {
+ if (window.google?.translate) {
window.googleTranslateInit();
}📝 Committable suggestion
Suggested change
🧰 Tools🪛 Biome
|
||||||||
| window.googleTranslateInit(); | ||||||||
| } | ||||||||
|
|
||||||||
| return () => { | ||||||||
| // Cleanup logic if necessary | ||||||||
| }; | ||||||||
| }, []); | ||||||||
|
|
||||||||
| return ( | ||||||||
| <div id="google_element" className="google-translate-container pl-20 md:pl-0"> | ||||||||
| <style jsx>{` | ||||||||
| .goog-te-combo { | ||||||||
| display: inline-block; | ||||||||
| background-color: #e0f2ff; /* Light blue background */ | ||||||||
| border: 2px solid #0056b3; /* Dark blue border */ | ||||||||
| border-radius: 0.5rem; /* Slightly more rounded */ | ||||||||
| padding: 0.5rem 1rem; /* Tailwind: p-2 */ | ||||||||
| font-size: 0.875rem; /* Tailwind: text-sm */ | ||||||||
| transition: all 0.3s ease; /* Smooth transition */ | ||||||||
| outline: none; | ||||||||
| color: #000; /* Black text */ | ||||||||
| font-weight: 500; /* Tailwind: font-medium */ | ||||||||
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Slight shadow */ | ||||||||
| } | ||||||||
| .goog-te-combo:hover { | ||||||||
| background-color: #b3e0ff; /* Lighter blue on hover */ | ||||||||
| border-color: #004494; /* Darker blue on hover */ | ||||||||
| box-shadow: 0 6px 8px rgba(0, 0, 0, 0.25); /* Stronger shadow on hover */ | ||||||||
| } | ||||||||
| .goog-logo-link { | ||||||||
| display: none !important; | ||||||||
| } | ||||||||
| .goog-te-gadget { | ||||||||
| color: transparent !important; | ||||||||
| } | ||||||||
| .goog-te-gadget > span > a { | ||||||||
| display: none !important; | ||||||||
| } | ||||||||
| .goog-te-gadget .goog-te-combo { | ||||||||
| color: #0056b3 !important; /* Dark blue text */ | ||||||||
| } | ||||||||
| #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'; /* Change the default text */ | ||||||||
| color: #0056b3; /* Dark blue text */ | ||||||||
| } | ||||||||
| .goog-te-banner-frame { | ||||||||
| display: none !important; | ||||||||
| } | ||||||||
| .goog-te-menu-frame { | ||||||||
| max-height: 400px !important; | ||||||||
| overflow-y: auto !important; | ||||||||
| background-color: #fff; /* White background for dropdown */ | ||||||||
| border: 1px solid #cce5ff; /* Light blue border */ | ||||||||
| border-radius: 0.5rem; /* Slightly more rounded */ | ||||||||
| } | ||||||||
| /* Hide the banner frame */ | ||||||||
| .goog-te-banner-frame { | ||||||||
| display: none !important; | ||||||||
| } | ||||||||
|
There was a problem hiding this comment. Remove duplicated styles. The style for hiding the banner frame is duplicated. Consider removing this duplicate to keep the styles DRY (Don't Repeat Yourself). Remove these lines as they are already defined earlier: - /* Hide the banner frame */
- .goog-te-banner-frame {
- display: none !important;
- }📝 Committable suggestion
Suggested change
|
||||||||
| /* Customize the iframe */ | ||||||||
| .skiptranslate > iframe { | ||||||||
| height: 0 !important; | ||||||||
| border-style: none; | ||||||||
| box-shadow: none; | ||||||||
| } | ||||||||
| `} | ||||||||
| </style> | ||||||||
|
There was a problem hiding this comment. 🛠️ Refactor suggestion Consider moving inline styles to a separate CSS file. While the inline styles effectively customize the Google Translate widget, moving them to a separate CSS file would improve maintainability and reusability. This separation of concerns aligns with best practices in React development. |
||||||||
| </div> | ||||||||
| ); | ||||||||
| }; | ||||||||
|
|
||||||||
| export default GoogleTranslate; | ||||||||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Remove duplicate language code 'es' in
includedLanguagesThe language code
'es'for Spanish is included twice in theincludedLanguagesstring. This duplication is unnecessary and can be removed to prevent any potential issues.Apply this diff to remove the duplicate:
📝 Committable suggestion