Merge pull request #324 from HishitaGupta/translator

Added Google Translator in footer
Akshatchaube01 · Jun 22, 2024 · 1db26df · 1db26df
2 parents fc6c18f + 68dc341
commit 1db26df
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 44 deletions.
diff --git a/index.html b/index.html
@@ -15,6 +15,19 @@
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
         <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+     <script type="text/javascript">
+      function googleTranslateElementInit() {
+        new google.translate.TranslateElement(
+          { pageLanguage: 'en' },
+          'google_translate_element'
+        );
+      }
+    </script>
+    <script
+      type="text/javascript"
+      src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
+    ></script>
+
 
     </head>
     <body>

diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -2,31 +2,24 @@ import { useEffect, useState } from 'react';
 import React from 'react';
 import './Footer.css';
 
-
 const quotes = [
   "Innovation distinguishes between a leader and a follower.",
-  "Simplicity is the ultimate sophistication. ",
+  "Simplicity is the ultimate sophistication.",
   "The secret of getting ahead is getting started.",
   "All limitations are self-imposed.",
-  "Tough times never last but tough people do. ",
+  "Tough times never last but tough people do.",
   "Strive for greatness.",
   // Add more quotes as needed
 ];
 
-
 const Footer = () => {
-
-
-
   const [footerStyle, setFooterStyle] = useState({
-    color: 'black' 
+    color: 'black'
   });
-  const [quote, setQuote] = useState(quotes[Math.floor(Math.random() * quotes.length)]); 
-
-  let savedTheme;
-
+  const [quote, setQuote] = useState(quotes[Math.floor(Math.random() * quotes.length)]);
+
   useEffect(() => {
-    savedTheme = localStorage.getItem('theme') || 'light'; 
+    let savedTheme = localStorage.getItem('theme') || 'light';
     setFooterStyle({
       color: savedTheme === 'light' ? 'white' : 'white',
       backgroundColor: savedTheme === 'light' ? '#0ea5e9' : '',
@@ -39,8 +32,25 @@ const Footer = () => {
       });
     }, 10000); // changes every 10 seconds
 
+    // Add Google Translate script
+    const addGoogleTranslateScript = () => {
+      const script = document.createElement('script');
+      script.type = 'text/javascript';
+      script.src = "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";
+      document.body.appendChild(script);
+    };
+
+    window.googleTranslateElementInit = () => {
+      new window.google.translate.TranslateElement(
+        { pageLanguage: 'en' },
+        'google_translate_element'
+      );
+    };
+
+    addGoogleTranslateScript();
+
     return () => clearInterval(intervalId); // cleanup interval on component unmount
-  }, [savedTheme]);
+  }, []);
 
   return (
     <footer className="footer" style={footerStyle}>
@@ -50,7 +60,7 @@ const Footer = () => {
           <ul className="contact-list">
             <li style={footerStyle}>
               <i className="fas fa-envelope"></i>&nbsp;&nbsp;
-              <a style={footerStyle} sty href="mailto:[email protected]">[email protected]</a>
+              <a style={footerStyle} href="mailto:[email protected]">[email protected]</a>
             </li>
             <li style={footerStyle}>
               <i className="fas fa-phone"></i>&nbsp;&nbsp;
@@ -93,6 +103,7 @@ const Footer = () => {
           <p>
             <cite style={footerStyle}>{quote}</cite>
           </p>
+          <div id="google_translate_element" className="mt-5 p-2 bg-white rounded-md shadow-md"></div>
         </div>
         <div className="footer-section social-media">
           <h4><strong style={footerStyle}>Follow Us</strong></h4>
@@ -122,33 +133,30 @@ const Footer = () => {
         <div className="footer-section social-media">
           <h4><strong style={footerStyle}>Company</strong></h4>
           <ul className="social-list">
-//             <li style={footerStyle}>
-               <a style={footerStyle} href="/privacy-policy" target="_blank" rel="noopener noreferrer">
-                  Privacy policys
-               </a>
-             </li>
-             <li style={footerStyle}>
-               <a style={footerStyle} href="/terms-and-conditions" target="_blank" rel="noopener noreferrer">
-               Terms & conditions
-               </a>
-             </li>
-             <li>
-               <input type="text" placeholder='Enter your email' className='p-1 rounded-md' />
-             </li>
-             <li>
-               <button className='border px-2 py-1 rounded-sm'>subscribe</button>
-             </li>
-           </ul>
-         </div>
-       </div>
-       <div className="footer-bottom">
-         <p style={footerStyle}>© 2024 TimeWarp. All rights reserved.</p>
-       </div>
-     </footer>
-   );
- };
-
-
- export default Footer;
-
+            <li style={footerStyle}>
+              <a style={footerStyle} href="/privacy-policy" target="_blank" rel="noopener noreferrer">
+                Privacy Policy
+              </a>
+            </li>
+            <li style={footerStyle}>
+              <a style={footerStyle} href="/terms-and-conditions" target="_blank" rel="noopener noreferrer">
+                Terms & Conditions
+              </a>
+            </li>
+            <li>
+              <input type="text" placeholder="Enter your email" className="p-1 rounded-md" />
+            </li>
+            <li>
+              <button className="border px-2 py-1 rounded-sm">Subscribe</button>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div className="footer-bottom">
+        <p style={footerStyle}>© 2024 TimeWarp. All rights reserved.</p>
+      </div>
+    </footer>
+  );
+};
 
+export default Footer;