Better translations
This commit is contained in:
Thomas Fransolet
parent
f2a4bdbac8
commit
784e859157
@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { resolveImage } from '@/data/stitch-images';
|
||||
import translations, { Language } from '@/data/translations';
|
||||
|
||||
@ -15,11 +15,11 @@ const MODULE_META = [
|
||||
{ id: 'stats', icon: 'monitoring', theme: 'rose' },
|
||||
];
|
||||
|
||||
const LANGUAGES: { code: Language; label: string }[] = [
|
||||
{ code: 'fr', label: 'FR' },
|
||||
{ code: 'en', label: 'EN' },
|
||||
{ code: 'nl', label: 'NL' },
|
||||
{ code: 'de', label: 'DE' },
|
||||
const LANGUAGES: { code: Language; label: string; name: string }[] = [
|
||||
{ code: 'fr', label: 'FR', name: 'Français' },
|
||||
{ code: 'en', label: 'EN', name: 'English' },
|
||||
{ code: 'nl', label: 'NL', name: 'Nederlands' },
|
||||
{ code: 'de', label: 'DE', name: 'Deutsch' },
|
||||
];
|
||||
|
||||
export default function Home() {
|
||||
@ -34,6 +34,8 @@ export default function Home() {
|
||||
const [activeModule, setActiveModule] = useState(0);
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
const [lang, setLang] = useState<Language>('fr');
|
||||
const [isLangOpen, setIsLangOpen] = useState(false);
|
||||
const langDropdownRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const t = translations[lang];
|
||||
|
||||
@ -59,6 +61,17 @@ export default function Home() {
|
||||
document.documentElement.lang = lang;
|
||||
}, [lang]);
|
||||
|
||||
// Close lang dropdown on outside click
|
||||
useEffect(() => {
|
||||
const handler = (e: MouseEvent) => {
|
||||
if (langDropdownRef.current && !langDropdownRef.current.contains(e.target as Node)) {
|
||||
setIsLangOpen(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener('mousedown', handler);
|
||||
return () => document.removeEventListener('mousedown', handler);
|
||||
}, []);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setStatus('loading');
|
||||
@ -107,24 +120,12 @@ export default function Home() {
|
||||
/>
|
||||
<span className="text-xl font-extrabold tracking-tight text-slate-900 hidden lg:block">MyInfoMate</span>
|
||||
</a>
|
||||
<nav className="hidden lg:flex items-center gap-10">
|
||||
<a className="text-sm font-semibold text-slate-600 hover:text-primary transition-colors" href="#deployment-modes">{t.nav.solution}</a>
|
||||
<a className="text-sm font-semibold text-slate-600 hover:text-primary transition-colors" href="#features">{t.nav.features}</a>
|
||||
<a className="text-sm font-semibold text-slate-600 hover:text-primary transition-colors" href="#audience">{t.nav.audience}</a>
|
||||
<nav className="hidden lg:flex items-center gap-8">
|
||||
<a className="text-sm font-semibold text-slate-600 hover:text-primary transition-colors w-[80px] text-center" href="#deployment-modes">{t.nav.solution}</a>
|
||||
<a className="text-sm font-semibold text-slate-600 hover:text-primary transition-colors w-[128px] text-center" href="#features">{t.nav.features}</a>
|
||||
<a className="text-sm font-semibold text-slate-600 hover:text-primary transition-colors w-[88px] text-center" href="#audience">{t.nav.audience}</a>
|
||||
</nav>
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Language selector - desktop */}
|
||||
<div className="hidden lg:flex items-center gap-0.5 border border-slate-200 rounded-full px-1 py-1">
|
||||
{LANGUAGES.map((l) => (
|
||||
<button
|
||||
key={l.code}
|
||||
onClick={() => setLang(l.code)}
|
||||
className={`text-xs font-bold px-3 py-1.5 rounded-full transition-all ${lang === l.code ? 'bg-primary text-slate-900' : 'text-slate-500 hover:text-slate-900'}`}
|
||||
>
|
||||
{l.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<a
|
||||
href="https://manager.myinfomate.be"
|
||||
className="hidden lg:block text-sm font-bold text-slate-900 hover:text-primary px-4 py-2 transition-colors"
|
||||
@ -137,6 +138,31 @@ export default function Home() {
|
||||
>
|
||||
{t.nav.demo}
|
||||
</button>
|
||||
{/* Language selector - desktop */}
|
||||
<div ref={langDropdownRef} className="relative hidden lg:block">
|
||||
<button
|
||||
onClick={() => setIsLangOpen(!isLangOpen)}
|
||||
className="flex items-center gap-1.5 px-3 py-2 rounded-xl text-sm font-bold text-slate-500 hover:text-slate-900 hover:bg-slate-100 transition-all"
|
||||
>
|
||||
<span className="material-symbols-outlined text-[18px] text-primary">language</span>
|
||||
<span>{lang.toUpperCase()}</span>
|
||||
<span className={`material-symbols-outlined text-[16px] transition-transform duration-200 ${isLangOpen ? 'rotate-180' : ''}`}>keyboard_arrow_down</span>
|
||||
</button>
|
||||
{isLangOpen && (
|
||||
<div className="absolute top-full right-0 mt-2 bg-white border border-slate-100 rounded-2xl shadow-xl overflow-hidden py-1.5 z-50">
|
||||
{LANGUAGES.map((l) => (
|
||||
<button
|
||||
key={l.code}
|
||||
onClick={() => { setLang(l.code); setIsLangOpen(false); }}
|
||||
className={`w-full flex items-center gap-3 px-4 py-2.5 text-left transition-colors ${lang === l.code ? 'text-primary bg-primary/5' : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'}`}
|
||||
>
|
||||
<span className="text-sm font-black w-7 shrink-0">{l.label}</span>
|
||||
<span className="text-sm text-slate-400 whitespace-nowrap">{l.name}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||||
className="lg:hidden w-10 h-10 flex items-center justify-center text-slate-600 hover:text-primary transition-colors"
|
||||
@ -199,14 +225,15 @@ export default function Home() {
|
||||
</div>
|
||||
|
||||
{/* Language selector - mobile */}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
{LANGUAGES.map((l) => (
|
||||
<button
|
||||
key={l.code}
|
||||
onClick={() => setLang(l.code)}
|
||||
className={`flex-1 py-2 text-xs font-bold rounded-xl border-2 transition-all ${lang === l.code ? 'bg-primary border-primary text-slate-900' : 'border-slate-200 text-slate-500 hover:border-slate-400'}`}
|
||||
className={`flex items-center gap-3 px-4 py-3 rounded-xl border-2 transition-all text-left ${lang === l.code ? 'bg-primary/5 border-primary text-primary' : 'border-slate-100 text-slate-600 hover:border-slate-300'}`}
|
||||
>
|
||||
{l.label}
|
||||
<span className="text-xs font-black w-6">{l.label}</span>
|
||||
<span className="text-sm font-medium">{l.name}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user