From 81dad2b6ba80d99eee2af76334f87bb4810557fa Mon Sep 17 00:00:00 2001 From: Arthur Wambst Date: Wed, 18 Jun 2025 04:01:37 +0200 Subject: [PATCH] wip: started to add translations --- .../src/components/layout/MobileMenu.tsx | 10 +-- .../src/components/layout/Navigation.tsx | 70 +++++++++++-------- .../src/components/sections/HeroSection.tsx | 13 ++-- banquise-website/src/components/ui/Popup.tsx | 26 +++---- 4 files changed, 66 insertions(+), 53 deletions(-) diff --git a/banquise-website/src/components/layout/MobileMenu.tsx b/banquise-website/src/components/layout/MobileMenu.tsx index a233ef8..7467c3a 100644 --- a/banquise-website/src/components/layout/MobileMenu.tsx +++ b/banquise-website/src/components/layout/MobileMenu.tsx @@ -2,13 +2,15 @@ import React, { useEffect } from 'react'; import banquiseServer from '../../assets/banquise_server.svg' import { URLS, SITE_CONFIG } from '../../config/constants'; import { commonStyles } from '../../styles/components'; +import type { Translation } from '../../types/i18n'; interface MobileMenuProps { isOpen: boolean; onClose: () => void; + translations: Translation['navigation']; } -export const MobileMenu: React.FC = ({ isOpen, onClose }) => { +export const MobileMenu: React.FC = ({ isOpen, onClose, translations }) => { useEffect(() => { if (isOpen) { document.body.style.overflow = 'hidden'; @@ -76,7 +78,7 @@ export const MobileMenu: React.FC = ({ isOpen, onClose }) => {
- Nos Services + {translations.services}

Découvrir notre offre

@@ -93,7 +95,7 @@ export const MobileMenu: React.FC = ({ isOpen, onClose }) => {
- À propos + {translations.about}

En savoir plus sur nous

@@ -106,7 +108,7 @@ export const MobileMenu: React.FC = ({ isOpen, onClose }) => {
- +
diff --git a/banquise-website/src/components/layout/Navigation.tsx b/banquise-website/src/components/layout/Navigation.tsx index 70935b2..c00ce5c 100644 --- a/banquise-website/src/components/layout/Navigation.tsx +++ b/banquise-website/src/components/layout/Navigation.tsx @@ -3,8 +3,14 @@ import { MobileMenu } from './MobileMenu'; import banquiseServer from '/src/assets/banquise_server.svg' import { URLS, SITE_CONFIG } from '../../config/constants'; import { commonStyles } from '../../styles/components'; +import type { Translation } from '../../types/i18n'; -export const Navigation: React.FC = () => { +interface NavigationProps { + translations: Translation['navigation']; + languageSwitcher: React.ReactElement; +} + +export const Navigation: React.FC = ({ translations, languageSwitcher }) => { const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [scrolled, setScrolled] = useState(false); @@ -13,7 +19,6 @@ export const Navigation: React.FC = () => { const isScrolled = window.scrollY > 20; setScrolled(isScrolled); }; - window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, []); @@ -24,7 +29,6 @@ export const Navigation: React.FC = () => { setMobileMenuOpen(false); } }; - window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); @@ -32,22 +36,21 @@ export const Navigation: React.FC = () => { return ( <> - + {/* Spacer pour compenser la navbar fixed */}
- + {/* Menu mobile */} - setMobileMenuOpen(false)} + setMobileMenuOpen(false)} + translations={translations} /> ); diff --git a/banquise-website/src/components/sections/HeroSection.tsx b/banquise-website/src/components/sections/HeroSection.tsx index b6b8eac..57ee13f 100644 --- a/banquise-website/src/components/sections/HeroSection.tsx +++ b/banquise-website/src/components/sections/HeroSection.tsx @@ -1,7 +1,12 @@ import React from 'react'; import banquiseServer from '/src/assets/banquise_server.svg' +import type { Translation } from '../../types/i18n'; -export const HeroSection: React.FC = () => ( +interface HeroSectionProps { + translations: Translation['hero']; +} + +export const HeroSection: React.FC = ({ translations }) => (
(

- Bienvenue sur La Banquise + {translations.title}

- Association d'hébergement et lab réseau pour tous les étudiants et associations de l'EPITA ! + {translations.subtitle}

- Découvrir nos services + {translations.cta}
diff --git a/banquise-website/src/components/ui/Popup.tsx b/banquise-website/src/components/ui/Popup.tsx index 8ed8158..1e9aac4 100644 --- a/banquise-website/src/components/ui/Popup.tsx +++ b/banquise-website/src/components/ui/Popup.tsx @@ -1,25 +1,19 @@ import React, { useEffect } from 'react'; import { URLS } from '../../config/constants'; - -interface Service { - name: string; - url: string; - image: string; - icon: string; - description: string; - features: string[]; -} +import type { Service } from '../../types/service'; +import type { Translation } from '../../types/i18n'; interface PopupProps { service: Service; onClose: () => void; + translations: Translation['common']; } -export const Popup: React.FC = ({ service, onClose }) => { +export const Popup: React.FC = ({ service, onClose, translations }) => { // Empêcher le scroll du body quand la popup est ouverte useEffect(() => { document.body.style.overflow = 'hidden'; - + return () => { document.body.style.overflow = 'unset'; }; @@ -28,18 +22,18 @@ export const Popup: React.FC = ({ service, onClose }) => { return (
- + {/* Bouton de fermeture fixe au-dessus du contenu */}
- + {/* Contenu avec scroll vertical uniquement */}
{/* Header */} @@ -100,7 +94,7 @@ export const Popup: React.FC = ({ service, onClose }) => { {/* Fonctionnalités */}

- Fonctionnalités principales + {translations.discoverFeatures}

{service.features.map((feature, index) => ( @@ -124,7 +118,7 @@ export const Popup: React.FC = ({ service, onClose }) => { 🚀 Accéder à {service.name} - +

Besoin d'aide ? Rejoignez notre Discord pour obtenir du support