diff --git a/Frontend/package.json b/Frontend/package.json index 04f0317..9d6339a 100644 --- a/Frontend/package.json +++ b/Frontend/package.json @@ -13,10 +13,12 @@ "@reduxjs/toolkit": "^2.6.0", "@tailwindcss/vite": "^4.0.9", "axios": "^1.8.4", + "i18next": "^25.2.1", "lucide-react": "^0.476.0", "react": "^19.0.0", "react-dom": "^19.0.0", "react-hot-toast": "^2.5.2", + "react-i18next": "^15.5.3", "react-icons": "^5.5.0", "react-redux": "^9.2.0", "react-router-dom": "^7.2.0" diff --git a/Frontend/src/App.jsx b/Frontend/src/App.jsx index beaa1ba..f82225c 100644 --- a/Frontend/src/App.jsx +++ b/Frontend/src/App.jsx @@ -1,5 +1,6 @@ import "./App.css"; import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; +import LanguageSwitcher from './components/LanguageSwitcher'; // Language switcher dropdown menu import Login from "./pages/Authentication/Login"; import SignUp from "./pages/Authentication/SignUp"; import DrivethruLandingPage from "./pages/UserPages/DrivethruLandingPage"; @@ -9,6 +10,7 @@ import NotFoundPage from "./pages/UserPages/NotFoundPage"; function App() { return ( + } /> } /> diff --git a/Frontend/src/components/LanguageSwitcher.jsx b/Frontend/src/components/LanguageSwitcher.jsx new file mode 100644 index 0000000..9937ce7 --- /dev/null +++ b/Frontend/src/components/LanguageSwitcher.jsx @@ -0,0 +1,51 @@ +import React from 'react'; +import { useTranslation } from 'react-i18next'; + +const languages = [ + { code: 'en', label: 'English' }, + { code: 'fr', label: 'Français' }, + // Add more languages as needed +]; + +function LanguageSwitcher() { + const { i18n } = useTranslation(); + + return ( +
+ +
+ ); +} + +export default LanguageSwitcher; + diff --git a/Frontend/src/i18n.js b/Frontend/src/i18n.js new file mode 100644 index 0000000..5d2a97e --- /dev/null +++ b/Frontend/src/i18n.js @@ -0,0 +1,26 @@ +import i18n from 'i18next'; +import { initReactI18next } from 'react-i18next'; + +import en from './locales/en.json'; +import fr from './locales/fr.json'; +// import more languages as needed + +const resources = { + en: { translation: en }, + fr: { translation: fr }, + // add other languages here +}; + +i18n + .use(initReactI18next) + .init({ + resources, + lng: 'en', // default language + fallbackLng: 'en', + //interpolation: { + // escapeValue: false, // not needed for React + //}, + }); + +export default i18n; + diff --git a/Frontend/src/locales/en.json b/Frontend/src/locales/en.json new file mode 100644 index 0000000..e69de29 diff --git a/Frontend/src/locales/fr.json b/Frontend/src/locales/fr.json new file mode 100644 index 0000000..e69de29 diff --git a/Frontend/src/main.jsx b/Frontend/src/main.jsx index 2439a22..bde4c3a 100644 --- a/Frontend/src/main.jsx +++ b/Frontend/src/main.jsx @@ -1,3 +1,5 @@ +import './i18n'; // for multilingual functionality + import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import "./index.css";