Different Language Support

Signed-off-by: kartik <kartikrautan0@gmail.com>

Author: kartikrautan

package-lock.json

@@ -34,6 +34,8 @@
     "dompurify": "^3.3.1",
     "highlight.js": "^11.10.0",
     "html2pdf.js": "^0.14.0",
+    "i18next": "^25.8.13",
+    "i18next-browser-languagedetector": "^8.2.1",
     "immer": "^10.1.1",
     "jest-canvas-mock": "^2.5.2",
     "lz-string": "^1.5.0",
@@ -46,6 +48,7 @@
     "react-dark-mode-toggle": "^0.2.0",
     "react-dom": "^18.2.0",
     "react-dropdown": "^1.11.0",
+    "react-i18next": "^16.5.4",
     "react-icons": "^5.5.0",
     "react-markdown": "^9.0.1",
     "react-resizable-panels": "^3.0.3",
@@ -109,4 +112,4 @@
     "not ie <= 11",
     "Safari >= 10"
   ]
-}
+}

package.json

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { useTranslation } from 'react-i18next';
 import { Layout, Row, Col, Typography, Space, Button, Image, Grid } from "antd";
 import {
   GithubOutlined,
@@ -16,6 +17,7 @@ const { Text, Link } = Typography;
 const { useBreakpoint } = Grid;
 
 const CustomFooter: React.FC = () => {
+  const { t } = useTranslation();
   const year = new Date().getFullYear();
   const screens = useBreakpoint();
   const [expanded, setExpanded] = useState(false);
@@ -41,7 +43,7 @@ const CustomFooter: React.FC = () => {
               />
             </Link>
             <Text style={{ color: "rgba(255, 255, 255, 0.65)" }}>
-              The open-source smart legal contract stack
+              {t('footer.tagline')}
             </Text>
             <Link href="mailto:admin@accordproject.org">
               <Text strong style={{ color: "rgba(255, 255, 255, 0.65)" }}>
@@ -60,7 +62,7 @@ const CustomFooter: React.FC = () => {
                   border: "none",
                 }}
               >
-                Join
+                {t('footer.join')}
               </Button>
             </Link>
           </Space>
@@ -73,7 +75,7 @@ const CustomFooter: React.FC = () => {
               onClick={() => setExpanded(!expanded)}
               style={{ color: "white", fontSize: "16px", marginBottom: "10px" }}
             >
-              {expanded ? <UpOutlined /> : <DownOutlined />} Other Links
+              {expanded ? <UpOutlined /> : <DownOutlined />} {t('footer.otherLinks')}
             </Button>
           )}
 
@@ -114,14 +116,14 @@ const CustomFooter: React.FC = () => {
       <Row justify="space-between" align="middle" style={{ marginTop: "40px" }}>
         <Col>
           <Text style={{ color: "rgba(255, 255, 255, 0.85)" }}>
-            copyright © {year} accord project &bull;{" "}
+            {t('footer.copyright')} © {year} accord project &bull;{" "}
             <Link
               strong
               href="https://accordproject.org/privacy"
               target="_blank"
               style={{ color: "rgba(255, 255, 255, 0.85)" }}
             >
-              trademark policy
+              {t('footer.trademarkPolicy')}
             </Link>{" "}
             &bull;{" "}
             <Link
@@ -130,7 +132,7 @@ const CustomFooter: React.FC = () => {
               target="_blank"
               style={{ color: "rgba(255, 255, 255, 0.85)" }}
             >
-              brand assets
+              {t('footer.brandAssets')}
             </Link>
           </Text>
         </Col>

src/components/Footer.tsx

@@ -1,11 +1,13 @@
 import React, { useState, useEffect } from "react";
+import { useTranslation } from 'react-i18next';
 import { Modal } from "antd";
 import AgreementHtml from "../AgreementHtml";
 import { MdFullscreen } from "react-icons/md";
 import useAppStore from "../store/store";
 
 const FullScreenModal: React.FC = () => {
   const [open, setOpen] = useState<boolean>(false);
+  const { t } = useTranslation();
   const textColor = useAppStore((state) => state.textColor);
   const backgroundColor = useAppStore((state) => state.backgroundColor);
 
@@ -42,7 +44,7 @@ const FullScreenModal: React.FC = () => {
         onClick={() => setOpen(true)}
       />
       <Modal
-        title="Output"
+        title={t('fullscreen.output')}
         centered
         open={open}
         onOk={() => setOpen(false)}