Added translation system

Added iconify package dependency

Author: BluePixelDev

package-lock.json

@@ -15,17 +15,22 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@fontsource/roboto": "^5.2.5",
+    "@iconify/react": "^5.2.1",
     "@mui/icons-material": "^7.0.2",
     "@mui/material": "^7.0.2",
     "boardify": "file:",
     "framer-motion": "^12.7.4",
+    "i18next": "^25.0.1",
+    "i18next-browser-languagedetector": "^8.0.5",
     "path": "^0.12.7",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-i18next": "^15.4.1",
     "react-router": "^7.5.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.22.0",
+    "@types/i18next": "^12.1.0",
     "@types/node": "^22.14.1",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",

package.json

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { IconButton, Box } from '@mui/material';
+import { Icon } from '@iconify/react';
+
+const LanguageSwap: React.FC = () => {
+    const { i18n } = useTranslation();
+
+    const changeLanguage = (language: string) => {
+        i18n.changeLanguage(language);
+    };
+
+    return (
+        <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+            {/* USA Flag */}
+            <IconButton onClick={() => changeLanguage('en')} color="inherit">
+                <Icon icon={"flag:gb-4x3"} width={30} height={20} />
+            </IconButton>
+            
+            {/* Czech Flag */}
+            <IconButton onClick={() => changeLanguage('cs')} color="inherit">
+                <Icon icon={"flag:cz-4x3"} width={30} height={20} />
+            </IconButton>
+        </Box>
+    );
+};
+
+export default LanguageSwap;

src/components/LanguageSwap.tsx

@@ -3,8 +3,11 @@ import { Box, Typography, Link, IconButton } from "@mui/material";
 import EmailIcon from "@mui/icons-material/Email";
 import LinkedInIcon from "@mui/icons-material/LinkedIn";
 import GitHubIcon from "@mui/icons-material/GitHub";
+import { useTranslation } from "react-i18next";
 
 export const Footer = () => {
+    const { t } = useTranslation();
+
     return (
         <footer className="footer">
             <Box className="footer__contacts" sx={{ padding: "1rem", display: "flex", justifyContent: "center", gap: 2 }}>
@@ -38,7 +41,7 @@ export const Footer = () => {
             </Box>
             <div className="footer__bottom">
                 <Typography variant="body2">
-                    © {new Date().getFullYear()} Ondřej Kačírek. All rights reserved.
+                    © {new Date().getFullYear()} {t("footer.copyright")}
                 </Typography>
             </div>
         </footer>

src/components/footer/Footer.tsx

@@ -11,6 +11,9 @@
 }
 
 .header__container {
+    
+    display: flex;
+    align-items: center;
     margin-left: auto;
     margin-right: auto;
     height: 100%;
@@ -38,4 +41,8 @@
     height: 100%;
     width: 100%;
     object-fit: contain;
+}
+
+.header__language {
+    margin-left: auto;
 }

src/components/header/Header.css

@@ -1,3 +1,4 @@
+import LanguageSwapHeader from "../LanguageSwap"
 import "./Header.css"
 import logo from "/favicon.png"
 
@@ -11,6 +12,9 @@ export const Header = () => {
                     </a>
                     <h1>Boardify</h1>
                 </div>
+                <div className="header__language">
+                    <LanguageSwapHeader />
+                </div>
             </div>
         </header>
     )

src/components/header/Header.tsx

@@ -0,0 +1,20 @@
+
+import "i18next"
+import en from "@locales/en/translation.json"
+import cs from "@locales/cs/translation.json"
+
+
+declare module "i18next" {
+    interface CustomTypeOptions {
+        resources: {
+            en: typeof en
+            cs: typeof cs
+        }
+    }
+}
+
+export interface FeatureItem {
+    title: string
+    description: string
+    icon: string
+}

src/i18n.d.ts

@@ -0,0 +1,67 @@
+{
+    "translation": {
+        "home": {
+            "title": "Vítejte na Boardify!",
+            "description": "<strong>Boardify</strong> je vaše nekonečná digitální tabule pro organizování médií — ideální pro moodboardy, sbírky výzkumů a vizuální plánování. Postaveno s <strong>Reactem</strong> a <strong>Tauri</strong> pro rychlost a flexibilitu.",
+            "view_on_github": "Zobrazit na GitHubu",
+            "footer": {
+                "copyright": "Ondřej Kačírek. Všechna práva vyhrazena."
+            },
+            "features": {
+                "title": "Funkce",
+                "items": [
+                    {
+                        "title": "Nekonečné plátno",
+                        "description": "Uspořádejte média a poznámky volně v neomezeném prostoru. Ideální pro kreativní brainstorming a vizuální pracovní postupy.",
+                        "icon": "mdi:infinity"
+                    },
+                    {
+                        "title": "Drag & Drop",
+                        "description": "Rychlé nahrávání a organizování obrázků, videí a dokumentů pomocí intuitivního drag-and-drop ovládání.",
+                        "icon": "mdi:mouse"
+                    },
+                    {
+                        "title": "Pluginová podpora",
+                        "description": "Navrženo pro rozšíření — snadno integrujte nové nástroje nebo vytvářejte vlastní funkce.",
+                        "icon": "mdi:rocket"
+                    },
+                    {
+                        "title": "Podporováno Tauri",
+                        "description": "Rychlý, lehký a nativní výkon díky Tauri — ideální pro pokročilé uživatele.",
+                        "icon": "mdi:flash"
+                    },
+                    {
+                        "title": "Vlastní UI",
+                        "description": "Postaveno s Reactem a MUI. Můžete přizpůsobit a upravit rozhraní tak, aby vyhovovalo vašemu pracovnímu postupu.",
+                        "icon": "mdi:palette"
+                    }
+                ]
+            }
+        },
+        "roadmap": {
+            "title": "Plán",
+            "items": [
+                {
+                    "title": "Podpora dalších typů souborů",
+                    "description": "Přidat podporu pro PDF, audio a dokumenty.",
+                    "status": "V průběhu"
+                },
+                {
+                    "title": "Systém hledání a označování médií",
+                    "description": "Implementovat hledání a označování mediálních souborů.",
+                    "status": "Připravujeme"
+                },
+                {
+                    "title": "Pluginové API pro vlastní rozšíření",
+                    "description": "Umožnit třetím stranám pluginy pro rozšíření funkcionality.",
+                    "status": "Dokončeno"
+                },
+                {
+                    "title": "Podpora Markdown poznámek pro kontextové tabule",
+                    "description": "Podpora pro syntaxi markdownu v poznámkách.",
+                    "status": "Připravujeme"
+                }
+            ]
+        }
+    }
+}