Merge pull request #8 from Craftserve/feature/i18n

i18n configuration review

Author: rozwader

package.json

@@ -11,8 +11,10 @@
   },
   "dependencies": {
     "@stitches/react": "^1.2.8",
+    "i18next": "^25.3.6",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-i18next": "^15.6.1",
     "react-icons": "^5.5.0",
     "react-router-dom": "^7.6.3"
   },

src/i18n/en.json

@@ -0,0 +1,17 @@
+{
+    "JoinUs": {
+        "title": "Join Us"
+    },
+    "Contact": {
+        "title": "Contact Us"
+    },
+    "FindOut": {
+        "title": "Find Out"
+    },
+    "MoreAboutUs": {
+        "title": "More About Us"
+    },
+    "WhyUs": {
+        "title": "Why Us"
+    }
+}

src/i18n/i18n.ts

@@ -0,0 +1,32 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+
+import pl from './pl.json'
+import en from './en.json'
+
+const DEFAULT_LANG = "en-US";
+
+const userLang = navigator.language || DEFAULT_LANG;
+const resources = {
+  "pl-PL": pl,
+  "en-US": en,
+  "en-GB": en,
+};
+
+i18n
+  .use(initReactI18next) // passes i18n down to react-i18next
+  .init({
+    resources,
+    lng: userLang,
+    keySeparator: false,
+    nsSeparator: ".",
+    fallbackLng: DEFAULT_LANG,
+    cache: {
+        enabled: true,
+    },
+    interpolation: {
+        escapeValue: false,
+    },
+  });
+
+  export default i18n;

src/i18n/pl.json

@@ -0,0 +1,17 @@
+{
+    "JoinUs": {
+        "title": "Dołącz do nas"
+    },
+    "Contact": {
+        "title": "Zkontaktuj się"
+    },
+    "FindOut": {
+        "title": "Dowiedz się"
+    },
+    "MoreAboutUs": {
+        "title": "Więcej o nas"
+    },
+    "WhyUs": {
+        "title": "Dlaczego my"
+    }
+}

src/main.tsx

@@ -2,6 +2,7 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App.tsx";
 import { BrowserRouter } from "react-router-dom";
+import "./i18n/i18n.js";
 
 createRoot(document.getElementById("root")!).render(
     <StrictMode>

src/modules/shared/components/navbar/index.tsx

@@ -13,10 +13,13 @@ import Button from "../button";
 import { FaPhoneAlt } from "react-icons/fa";
 import { IoMenu } from "react-icons/io5";
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 
 const Navbar = () => {
     const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
 
+    const {t} = useTranslation();
+
     const toggleMenu = (): void => {
         setIsMenuOpen(!isMenuOpen);
     };
@@ -32,13 +35,13 @@ const Navbar = () => {
                 <StyledMenuList>
                     <StyledMenuItem>
                         <Link className="nav-link" to="/whyus">
-                            Dlaczego my
+                            {t("WhyUs.title")}
                         </Link>
                     </StyledMenuItem>
                     <StyledMenuItem>
                         <Button variant="secondary" fontSize="16px">
                             <FaPhoneAlt />
-                            Kontakt
+                            {t("Contact.title")}
                         </Button>
                     </StyledMenuItem>
                 </StyledMenuList>

src/screens/HeroScreen/index.tsx

@@ -6,8 +6,11 @@ import Navbar from "../../modules/shared/components/navbar";
 import Box from "../../modules/shared/components/box";
 import Card from "../../modules/shared/components/card";
 import ImageWrapper from "./style";
+import { useTranslation } from "react-i18next";
 
 const HeroScreen = () => {
+    const {t} = useTranslation();
+
     return (
         <>
             <Layout>
@@ -16,17 +19,17 @@ const HeroScreen = () => {
                     <Box display="flex" gap="20px" margin="20px">
                         <Button variant="primary">
                             <FaPhoneAlt />
-                            Dołącz do nas
+                            {t("JoinUs.title")}
                         </Button>
                         <Button variant="secondary">
                             <FaPhoneAlt />
-                            Kontakt
+                            {t("Contact.title")}
                         </Button>
                         <Button variant="outlined">
                             <IoIosInformationCircle size="1.8em" />
                             <Box display="flex" direction="column">
-                                <span style={{ fontSize: "14px", fontWeight: "normal" }}>dowiedz się</span>
-                                <span>Więcej o nas</span>
+                                <span style={{ fontSize: "14px", fontWeight: "normal" }}>{t("FindOut.title")}</span>
+                                <span>{t("MoreAboutUs.title")}</span>
                             </Box>
                         </Button>
                     </Box>