Kinou/my_website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix translation

Browse Source
This commit is contained in:
kinou-p 2025-02-16 13:29:55 +01:00
parent 11345a1288
commit 13786e32f4
11 changed files with 107 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
my-app/src/App.tsx
View File

@ -27,6 +27,8 @@ import CssBaseline from '@mui/material/CssBaseline';
import Header from './components/header';
import { ColorModeContext } from './utils/color-toggle';
import { useTranslation } from 'react-i18next';
import { I18nextProvider } from 'react-i18next';
import i18n from './utils/i18n'; // Assuming you have a separate i18n config file
import "./utils/i18n";
import Project from './pages/projects';
@ -60,6 +62,7 @@ function App()
return (
// <React.StrictMode>
<div>
<I18nextProvider i18n={i18n}>
<Header/>
<BrowserRouter>
<CssBaseline />
@ -82,7 +85,7 @@ function App()
</Routes>
{/* </Router> */}
</BrowserRouter>
</I18nextProvider>
</div>
// </React.StrictMode>
);

186
my-app/src/components/header.tsx
View File

@ -1,147 +1,83 @@
import MenuSimple from './language';
import MaterialUISwitch from './switch'
import { useTheme, ThemeProvider, createTheme } from '@mui/material/styles';
import React, { useState, useContext} from "react";
import { useEffect } from "react";
import React, { useState, useContext, useEffect } from "react";
import { useTranslation } from 'react-i18next';
import { ColorModeContext } from '../utils/color-toggle';
import ReactCountryFlag from "react-country-flag";
import { Box, MenuItem, Select, SelectChangeEvent } from '@mui/material';
import MaterialUISwitch from './switch';
import logo from '../img/logo.png';
import { ColorModeContext } from '../utils/color-toggle';
import { useTranslation } from 'react-i18next';
import ReactCountryFlag from "react-country-flag"
import { FormControl } from 'react-bootstrap';
import { Box, InputLabel, MenuItem} from '@mui/material';
import Select, { SelectChangeEvent } from '@mui/material/Select';
import Menu from '@mui/material/Menu';
// import MenuItem from '@mui/material/MenuItem';
import PopupState, { bindHover, bindMenu } from 'material-ui-popup-state';
import Button from '@mui/material/Button';
function Header()
{
function Header() {
const { i18n, t } = useTranslation();
const { changeMode } = useContext(ColorModeContext);
const [language, setLanguage] = useState(1);
const [mode, setMode] = useState("dark");
// const [checked, setChecked] = useState(1);
const [checked, setChecked] = React.useState(true);
// Read language from localStorage or default to 'en'
const storedLanguage = localStorage.getItem('language') || 'en';
const [language, setLanguage] = useState(storedLanguage);
const [checked, setChecked] = useState(localStorage.getItem('mode') === 'light' ? false : true);
useEffect(() => {
if (!localStorage.getItem('language'))
localStorage.setItem('language', 'en');
else
{
let current = localStorage.getItem('language')
if (current == 'en')
{
setLanguage(current ? 0 : 1)
i18n.changeLanguage(current)
i18n.changeLanguage(language); // Apply saved language
localStorage.setItem('language', language); // Persist on reload
}, [language, i18n]); // Re-run effect if language changes
useEffect(() => {
if (localStorage.getItem('mode') === 'light') {
changeMode();
setChecked(false);
}
}
}, [changeMode]);
if (!localStorage.getItem('mode'))
localStorage.setItem('mode', 'dark');
else
{
let current = localStorage.getItem('mode')
if (current == "light")
{
changeMode()
setChecked(false)
}
}
}, []);
function handleChange() {
i18n.changeLanguage(language ? 'en' : 'fr')
localStorage.setItem('language', language ? 'en' : 'fr');
setLanguage(language ? 0 : 1)
function handleLanguageChange(event: SelectChangeEvent) {
const newLang = event.target.value;
setLanguage(newLang); // Update state
}
function handleMode() {
let current = localStorage.getItem('mode')
localStorage.setItem('mode', current == 'light' ? 'dark' : 'light');
changeMode()
setChecked(checked ? false : true)
function handleModeToggle() {
const newMode = checked ? 'dark' : 'light';
localStorage.setItem('mode', newMode);
changeMode();
setChecked(!checked);
}
return (
<header>
<div className="header-content">
<a className="logo" href="/">
<img src={logo} alt="Logo" />
</a>
<div className="header-content">
<a className="logo" href="/">
<img src={logo} alt="Logo" />
</a>
{/* <PopupState variant="popover" popupId="demo-popup-menu">
{(popupState) => (
<React.Fragment>
<Button className="pages" href="/skills" {...bindHover(popupState)}>
{t("page2")}
</Button>
<Menu {...bindMenu(popupState)}>
<MenuItem onClick={popupState.close}>Profile</MenuItem>
<MenuItem onClick={popupState.close}>My account</MenuItem>
<MenuItem onClick={popupState.close}>Logout</MenuItem>
</Menu>
</React.Fragment>
)}
</PopupState> */}
<div className="menu">
<div className="pages">
<a href="/projects">{t("page2")}</a>
<div className="menu">
<div className="pages">
<a href="/projects">{t("page2")}</a>
</div>
<div className="pages">
<a href="/skills">{t("page4")}</a>
</div>
<div className="pages">
<a href="/contact">{t("page1")}</a>
</div>
</div>
<div className="pages">
<a href="/skills">{t("page4")}</a>
<div className="language">
<Box sx={{ minWidth: 120 }}>
<Select
value={language}
onChange={handleLanguageChange}
>
<MenuItem value="en">
<ReactCountryFlag countryCode="GB" svg />
</MenuItem>
<MenuItem value="fr">
<ReactCountryFlag countryCode="FR" svg />
</MenuItem>
</Select>
</Box>
<MaterialUISwitch checked={checked} onChange={handleModeToggle} />
</div>
<div className="pages">
<a href="/contact">{t("page1")}</a>
</div>
{/* <div className="pages">
<a href="/resume">{t("page3")}</a>
</div> */}
</div>
<div className="language">
{/* <MenuSimple/> */}
<Box sx={{ minWidth: 120 }}>
{/* <FormControl > */}
{/* <InputLabel id="demo-simple-select-label">Age</InputLabel> */}
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={language}
// label="Age"
onChange={handleChange}
>
<MenuItem value={0}><ReactCountryFlag countryCode="GB" svg/></MenuItem>
<MenuItem value={1}><ReactCountryFlag countryCode="FR" svg/></MenuItem>
</Select>
{/* </FormControl> */}
</Box>
<MaterialUISwitch checked={checked} onChange={handleMode}/>
</div>
</div>
</header>
)
);
}
export default Header;
// function useEffect(arg0: () => void, arg1: number[]) {
// throw new Error('Function not implemented.');
// }

6
my-app/src/pages/contact.tsx
View File

@ -1,13 +1,17 @@
import { useTranslation } from "react-i18next";
import React, { useEffect } from 'react';
function Contact()
{
const { i18n, t } = useTranslation();
useEffect(() => {
i18n.changeLanguage(i18n.language);
}, [i18n.language]);
return (
<div className="contact_page">
<div className="contact_title">{t("contact_me")}</div>
<svg className="badge contact_badge" fill="white" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M9 2C9 1.44772 9.44772 1 10 1H14C14.5523 1 15 1.44772 15 2V3C15 3.55228 14.5523 4 14 4H10C9.44772 4 9 3.55228 9 3V2Z" fill="#000000"/><rect x="5.75" y="1.75" width="12.5" height="20.5" rx="1.75" stroke="#000000" stroke-width="1.5"/><path d="M9 19.5H15" stroke="#000000" stroke-width="1.5" stroke-linecap="round"/></svg>
<svg className="badge contact_badge" fill="white" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M9 2C9 1.44772 9.44772 1 10 1H14C14.5523 1 15 1.44772 15 2V3C15 3.55228 14.5523 4 14 4H10C9.44772 4 9 3.55228 9 3V2Z" fill="#000000"/><rect x="5.75" y="1.75" width="12.5" height="20.5" rx="1.75" stroke="#000000" strokeWidth="1.5"/><path d="M9 19.5H15" stroke="#000000" strokeWidth="1.5" strokeLinecap="round"/></svg>
<div className="contact_list">
<a className="contact_box" href="tel:+33652403830">
06.52.40.38.30

14
my-app/src/pages/home.tsx
View File

@ -5,14 +5,18 @@ import { FaArrowRightLong } from "react-icons/fa6";
import { useTranslation } from 'react-i18next';
import Button from '@mui/material/Button';
import React, { useEffect } from 'react';
function Home()
{
const { i18n, t } = useTranslation();
useEffect(() => {
i18n.changeLanguage(i18n.language);
}, [i18n.language]);
return(
<div>
<body>
{/* <Header/> */}
<div className='home'>
<div className="presentation">
@ -22,11 +26,6 @@ function Home()
Je suis ouvert à de nombreuses propositions en rapport avec mes études
et suis prêt à discuter de mon parcours plus amplement lors d’un entretien.</div> */}
<div className= "description">{t("description")}</div>
{/* <div className= "cv_button">
<a className="button" href="/resume">
{t("resume")}
</a>
</div> */}
</div>
<div className="project">
<div className='project_txt'>{t("project")}</div>
@ -52,7 +51,6 @@ function Home()
</div>
</div>
</div>
</body>
</div>
)
}

6
my-app/src/pages/projects.tsx
View File

@ -2,9 +2,15 @@ import { useTranslation } from 'react-i18next';
import img from '../img/pong.webp';
import { FaArrowRightLong } from "react-icons/fa6";
import React, { useEffect } from 'react';
function Project()
{
const { i18n, t } = useTranslation();
useEffect(() => {
i18n.changeLanguage(i18n.language);
}, [i18n.language]);
return (
<div className="project project_home">
<div className='project_txt'>{t("project")}</div>

4
my-app/src/pages/projects/cloud_1.tsx
View File

@ -1,9 +1,13 @@
import { useTranslation } from 'react-i18next';
import img from '../../img/ansible.webp';
import React, { useEffect } from 'react';
function Cloud_1()
{
const { i18n, t } = useTranslation();
useEffect(() => {
i18n.changeLanguage(i18n.language);
}, [i18n.language]);
return (
<div className="project_page">
<div className="project_description">

4
my-app/src/pages/projects/cube3d.tsx
View File

@ -1,9 +1,13 @@
import { useTranslation } from 'react-i18next';
import img from '../../img/cube3d_2.png';
import React, { useEffect } from 'react';
function Cube3d()
{
const { i18n, t } = useTranslation();
useEffect(() => {
i18n.changeLanguage(i18n.language);
}, [i18n.language]);
return (
<div className="project_page">
<div className="project_description">

4
my-app/src/pages/projects/ft_transcendence.tsx
View File

@ -1,9 +1,13 @@
import { useTranslation } from 'react-i18next';
import img from '../../img/pong.webp';
import React, { useEffect } from 'react';
function Ft_transcendence()
{
const { i18n, t } = useTranslation();
useEffect(() => {
i18n.changeLanguage(i18n.language);
}, [i18n.language]);
return (
<div className="project_page">
<div className="project_description">

4
my-app/src/pages/projects/minishell.tsx
View File

@ -1,9 +1,13 @@
import { useTranslation } from 'react-i18next';
import img from '../../img/bash.png';
import React, { useEffect } from 'react';
function Minishell()
{
const { i18n, t } = useTranslation();
useEffect(() => {
i18n.changeLanguage(i18n.language);
}, [i18n.language]);
return (
<div className="project_page">
<div className="project_description">

4
my-app/src/pages/projects/nas.tsx
View File

@ -1,9 +1,13 @@
import { useTranslation } from 'react-i18next';
import img from '../../img/omv_dashboard.png';
import React, { useEffect } from 'react';
function Nas()
{
const { i18n, t } = useTranslation();
useEffect(() => {
i18n.changeLanguage(i18n.language);
}, [i18n.language]);
return (
<div className="project_page">
<div className="project_description">

5
my-app/src/utils/i18n.tsx
View File

@ -16,6 +16,11 @@ i18n
.use(initReactI18next) // passes i18n down to react-i18next
.init({
fallbackLng: "fr",
supportedLngs: ['en', 'fr'],
detection: {
order: ['localStorage', 'cookie', 'navigator'], // Prioritize storage
caches: ['localStorage', 'cookie'], // Persist language setting
},
// lng: getCurrentLang(),
interpolation: {
escapeValue: false,