From 2f610e01bb90c8495c209c94b39e6d821c14a916 Mon Sep 17 00:00:00 2001
From: "Mr. Hasan" <hasanshahriar32@gmail.com>
Date: Sun, 13 Oct 2024 06:54:46 +0600
Subject: [PATCH] Refactor FooterLayout component and add GTranslate component

---
 components/global/Footer/FooterLayout.tsx |  4 +++
 components/global/Footer/gTranslate.tsx   | 32 +++++++++++++++++++++++
 package-lock.json                         | 25 ++++++++++++++++++
 package.json                              |  1 +
 4 files changed, 62 insertions(+)
 create mode 100644 components/global/Footer/gTranslate.tsx

diff --git a/components/global/Footer/FooterLayout.tsx b/components/global/Footer/FooterLayout.tsx
index 635608e..f1c7327 100644
--- a/components/global/Footer/FooterLayout.tsx
+++ b/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>
   )
 }
diff --git a/components/global/Footer/gTranslate.tsx b/components/global/Footer/gTranslate.tsx
new file mode 100644
index 0000000..5f90a91
--- /dev/null
+++ b/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;
diff --git a/package-lock.json b/package-lock.json
index 0d90689..df40c86 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,6 +33,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",
@@ -12198,6 +12199,21 @@
         }
       }
     },
+    "node_modules/react-helmet": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.1.1",
+        "react-side-effect": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0"
+      }
+    },
     "node_modules/react-hooks-global-state": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/react-hooks-global-state/-/react-hooks-global-state-2.1.0.tgz",
@@ -12310,6 +12326,15 @@
         "rxjs": "^7"
       }
     },
+    "node_modules/react-side-effect": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
+      "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-style-proptype": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/react-style-proptype/-/react-style-proptype-3.2.2.tgz",
diff --git a/package.json b/package.json
index 6a891c6..a0e61ce 100644
--- a/package.json
+++ b/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",