Refactor FooterLayout component and add GTranslate component

components/global/Footer/FooterLayout.tsx

@@ -2,6 +2,7 @@ import type { PortableTextBlock } from 'next-sanity'
 
 import { CustomPortableText } from '@/components//shared/CustomPortableText'
 import type { SettingsPayload } from '@/types'
+import GTranslate from './gTranslate'
 
 interface FooterProps {
   data: SettingsPayload
@@ -17,6 +18,9 @@ export default function Footer(props: FooterProps) {
           value={footer}
         />
       )}
+      <div className="flex w-full flex-row flex-wrap items-center justify-center">
+        <GTranslate />
+      </div>
     </footer>
   )
 }

components/global/Footer/gTranslate.tsx

@@ -0,0 +1,32 @@
+"use client";
+import React from "react";
+import { Helmet } from "react-helmet";
+function GTranslate() {
+  return (
+    <div>
+      {/* Your component content here */}
+
+      {/* Add the following Helmet component to include the script in the head */}
+      <Helmet>
+        <script type="text/javascript">
+          {`
+                function googleTranslateElementInit() {
+                new google.translate.TranslateElement(
+                        {pageLanguage: 'en'},
+                        'google_translate_element'
+                );
+        }
+            `}
+        </script>
+        <script
+          async
+          type="text/javascript"
+          src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
+        ></script>
+      </Helmet>
+      <div id="google_translate_element"></div>
+    </div>
+  );
+}
+
+export default GTranslate;

package.json

@@ -42,6 +42,7 @@
     "next-sanity": "9.5.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
+    "react-helmet": "^6.1.0",
     "react-hooks-global-state": "^2.1.0",
     "react-photo-view": "^1.2.6",
     "react-swipeable": "^7.0.0",