Merge pull request #5 from smswithoutborders/dev

added translation to the navbar

package.json

@@ -12,8 +12,12 @@
 		"@testing-library/react": "^13.0.0",
 		"@testing-library/user-event": "^13.2.1",
 		"framer-motion": "^11.1.0",
+		"i18next": "^23.11.5",
+		"i18next-browser-languagedetector": "^8.0.0",
+		"i18next-http-backend": "^2.5.2",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
+		"react-i18next": "^14.1.2",
 		"react-icons": "^5.1.0",
 		"react-router-dom": "^6.22.3",
 		"react-scripts": "5.0.1",

public/locals/en/landingpage.json

@@ -0,0 +1,4 @@
+{
+	"welcome": "Keep talking with RelaySMS",
+	"about": "Send Emails, Posts, and Messages securely via SMS."
+}

public/locals/en/nav.json

@@ -0,0 +1,6 @@
+{
+	"home": "Home",
+	"help": "Help",
+	"github": "Github",
+	"blog": "Blog"
+}

public/locals/fa/landingpage.json

@@ -0,0 +1,4 @@
+{
+	"welcome": "Keep talking with RelaySMS",
+	"about": "Send Emails, Posts, and Messages securely via SMS."
+}

public/locals/fa/nav.json

@@ -0,0 +1,6 @@
+{
+	"home": "خانه",
+	"help": "کمک",
+	"github": "گیت‌هاب",
+	"blog": "وبلاگ"
+}

public/locals/fr/landingpage.json

@@ -0,0 +1,4 @@
+{
+	"welcome": "Keep talking with RelaySMS",
+	"about": "Send Emails, Posts, and Messages securely via SMS."
+}

public/locals/fr/nav.json

@@ -0,0 +1,6 @@
+{
+	"home": "Accueil",
+	"help": "Aide",
+	"github": "Github",
+	"blog": "Blog"
+}

src/Components/LanguageSwitcher.js

@@ -0,0 +1,22 @@
+// src/components/LanguageSwitcher.js
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+const LanguageSwitcher = () => {
+	const { i18n } = useTranslation();
+
+	const changeLanguage = (lng) => {
+		i18n.changeLanguage(lng);
+	};
+
+	return (
+		<div>
+			<button onClick={() => changeLanguage("en")}>EN</button>
+			<button onClick={() => changeLanguage("fr")}>FR</button>
+			<button onClick={() => changeLanguage("fa")}>FA</button>
+			<button onClick={() => changeLanguage("es")}>ES</button>
+		</div>
+	);
+};
+
+export default LanguageSwitcher;

src/Components/MobileNav.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import Box from "@mui/material/Box";
 import Toolbar from "@mui/material/Toolbar";
 import IconButton from "@mui/material/IconButton";
@@ -9,8 +9,12 @@ import Container from "@mui/material/Container";
 import MenuItem from "@mui/material/MenuItem";
 import Brightness4Icon from "@mui/icons-material/Brightness4";
 import Brightness7Icon from "@mui/icons-material/Brightness7";
+import { useTranslation } from "react-i18next";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import Select from "@mui/material/Select";
 
 function MobileNav({ darkMode, toggleDarkMode }) {
+	const { t, i18n } = useTranslation("navbar");
 	const [anchorElNav, setAnchorElNav] = React.useState(null);
 
 	const handleOpenNavMenu = (event) => {
@@ -21,6 +25,11 @@ function MobileNav({ darkMode, toggleDarkMode }) {
 		setAnchorElNav(null);
 	};
 
+	const changeLanguage = (lng) => {
+		i18n.changeLanguage(lng);
+		handleCloseNavMenu(); // Close the dropdown after selecting a language
+	};
+
 	return (
 		<nav style={{ backgroundColor: "transparent" }}>
 			<Container
@@ -74,7 +83,7 @@ function MobileNav({ darkMode, toggleDarkMode }) {
 									target="_blank"
 									rel="noreferrer noopener"
 								>
-									Help
+									{t("help")}
 								</Typography>
 							</MenuItem>
 
@@ -85,7 +94,7 @@ function MobileNav({ darkMode, toggleDarkMode }) {
 								target="_blank"
 								rel="noreferrer noopener"
 							>
-								<Typography textAlign="center">Github</Typography>
+								<Typography textAlign="center">{t("github")}</Typography>
 							</MenuItem>
 
 							<MenuItem
@@ -95,13 +104,24 @@ function MobileNav({ darkMode, toggleDarkMode }) {
 								target="_blank"
 								rel="noreferrer noopener"
 							>
-								<Typography textAlign="center">Blogs</Typography>
+								<Typography textAlign="center">{t("blog")}</Typography>
 							</MenuItem>
 
 							<MenuItem onClick={handleCloseNavMenu}>
-								<Typography textAlign="center">Donate</Typography>
+								<Typography textAlign="center">{t("donate")}</Typography>
 							</MenuItem>
 						</Menu>
+						<Select
+							value={i18n.language}
+							onChange={(e) => changeLanguage(e.target.value)}
+							IconComponent={ArrowDropDownIcon}
+							sx={{ ml: 1 }}
+						>
+							<MenuItem value="en">🇺🇸</MenuItem>
+							<MenuItem value="fr">🇫🇷</MenuItem>
+							<MenuItem value="fa">🇮🇷</MenuItem>
+							<MenuItem value="es">🇪🇸</MenuItem>
+						</Select>
 						<IconButton
 							onClick={toggleDarkMode}
 							sx={{ ml: 2 }}

src/i18n.js

@@ -0,0 +1,23 @@
+// src/i18n.js
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import HttpApi from "i18next-http-backend";
+import LanguageDetector from "i18next-browser-languagedetector";
+
+i18n
+	.use(HttpApi)
+	.use(LanguageDetector)
+	.use(initReactI18next)
+	.init({
+		supportedLngs: ["en", "fr", "fa", "es"],
+		fallbackLng: "en",
+		debug: true,
+		interpolation: {
+			escapeValue: false // not needed for react as it escapes by default
+		},
+		backend: {
+			loadPath: "/locales/{{lng}}/{{ns}}.json"
+		}
+	});
+
+export default i18n;

src/index.js

@@ -3,11 +3,15 @@ import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
+import { I18nextProvider } from "react-i18next";
+import i18n from "./i18n";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
 	<React.StrictMode>
-		<App />
+		<I18nextProvider i18n={i18n}>
+			<App />
+		</I18nextProvider>
 	</React.StrictMode>
 );
 

yarn.lock

@@ -4090,6 +4090,13 @@ cosmiconfig@^7.0.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
+[email protected]:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-4.0.0.tgz#f037aef1580bb3a1a35164ea2a848ba81b445983"
+  integrity sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g==
+  dependencies:
+    node-fetch "^2.6.12"
+
 cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
@@ -6106,6 +6113,13 @@ html-minifier-terser@^6.0.2:
     relateurl "^0.2.7"
     terser "^5.10.0"
 
+html-parse-stringify@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz#dfc1017347ce9f77c8141a507f233040c59c55d2"
+  integrity sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==
+  dependencies:
+    void-elements "3.1.0"
+
 html-webpack-plugin@^5.5.0:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-5.6.0.tgz#50a8fa6709245608cb00e811eacecb8e0d7b7ea0"
@@ -6215,6 +6229,27 @@ husky@^9.0.11:
   resolved "https://registry.yarnpkg.com/husky/-/husky-9.0.11.tgz#fc91df4c756050de41b3e478b2158b87c1e79af9"
   integrity sha512-AB6lFlbwwyIqMdHYhwPe+kjOC3Oc5P3nThEoW/AaO2BX3vJDjWPFxYLxokUZOo6RNX20He3AaT8sESs9NJcmEw==
 
+i18next-browser-languagedetector@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.0.0.tgz#b6fdd9b43af67c47f2c26c9ba27710a1eaf31e2f"
+  integrity sha512-zhXdJXTTCoG39QsrOCiOabnWj2jecouOqbchu3EfhtSHxIB5Uugnm9JaizenOy39h7ne3+fLikIjeW88+rgszw==
+  dependencies:
+    "@babel/runtime" "^7.23.2"
+
+i18next-http-backend@^2.5.2:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/i18next-http-backend/-/i18next-http-backend-2.5.2.tgz#3d846cc239987fe7700d1cf0f17975807bfd25d3"
+  integrity sha512-+K8HbDfrvc1/2X8jpb7RLhI9ZxBDpx3xogYkQwGKlWAUXLSEGXzgdt3EcUjLlBCdMwdQY+K+EUF6oh8oB6rwHw==
+  dependencies:
+    cross-fetch "4.0.0"
+
+i18next@^23.11.5:
+  version "23.11.5"
+  resolved "https://registry.yarnpkg.com/i18next/-/i18next-23.11.5.tgz#d71eb717a7e65498d87d0594f2664237f9e361ef"
+  integrity sha512-41pvpVbW9rhZPk5xjCX2TPJi2861LEig/YRhUkY+1FQ2IQPS0bKUDYnEqY8XPPbB48h1uIwLnP9iiEfuSl20CA==
+  dependencies:
+    "@babel/runtime" "^7.23.2"
+
 [email protected], iconv-lite@^0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -8209,6 +8244,13 @@ no-case@^3.0.4:
     lower-case "^2.0.2"
     tslib "^2.0.3"
 
+node-fetch@^2.6.12:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.7.0.tgz#d0f0fa6e3e2dc1d27efcd8ad99d550bda94d187d"
+  integrity sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==
+  dependencies:
+    whatwg-url "^5.0.0"
+
 node-forge@^1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-1.3.1.tgz#be8da2af243b2417d5f646a770663a92b7e9ded3"
@@ -9678,6 +9720,14 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
+react-i18next@^14.1.2:
+  version "14.1.2"
+  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-14.1.2.tgz#cd57a755f25a32a5fcc3dbe546cf3cc62b4f3ebd"
+  integrity sha512-FSIcJy6oauJbGEXfhUgVeLzvWBhIBIS+/9c6Lj4niwKZyGaGb4V4vUbATXSlsHJDXXB+ociNxqFNiFuV1gmoqg==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    html-parse-stringify "^3.0.1"
+
 react-icons@^5.1.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.2.1.tgz#28c2040917b2a2eda639b0f797bff1888e018e4a"
@@ -11152,6 +11202,11 @@ tr46@^2.1.0:
   dependencies:
     punycode "^2.1.1"
 
+tr46@~0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
+  integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
+
 trim-newlines@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-3.0.1.tgz#260a5d962d8b752425b32f3a7db0dcacd176c144"
@@ -11511,6 +11566,11 @@ vary@~1.1.2:
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
 
+[email protected]:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"
+  integrity sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==
+
 vscode-json-languageservice@^4.1.6:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/vscode-json-languageservice/-/vscode-json-languageservice-4.2.1.tgz#94b6f471ece193bf4a1ef37f6ab5cce86d50a8b4"
@@ -11596,6 +11656,11 @@ web-vitals@^2.1.0:
   resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-2.1.4.tgz#76563175a475a5e835264d373704f9dde718290c"
   integrity sha512-sVWcwhU5mX6crfI5Vd2dC4qchyTqxV8URinzt25XqVh+bHEPGH4C3NPrNionCP7Obx59wrYEbNlw4Z8sjALzZg==
 
+webidl-conversions@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
+  integrity sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==
+
 webidl-conversions@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
@@ -11748,6 +11813,14 @@ whatwg-mimetype@^2.3.0:
   resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"
   integrity sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==
 
+whatwg-url@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"
+  integrity sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==
+  dependencies:
+    tr46 "~0.0.3"
+    webidl-conversions "^3.0.0"
+
 whatwg-url@^7.0.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-7.1.0.tgz#c2c492f1eca612988efd3d2266be1b9fc6170d06"