Deutch,France and italiano

2026-07-25 19:33:51 +02:00
parent 59184d9164
commit 7f328ae3ea
5 changed files with 1311 additions and 485 deletions
@@ -0,0 +1,43 @@
+"use client"
+
+import { useState, useRef, useEffect } from 'react'
+import { useLang } from '../i18n/lang-context'
+import { LANGS } from '../i18n/translations'
+
+export default function LangSwitcher() {
+  const { lang, setLang } = useLang()
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!open) return
+    const onClick = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
+    }
+    document.addEventListener('click', onClick)
+    return () => document.removeEventListener('click', onClick)
+  }, [open])
+
+  return (
+    <div className="lang-switch" ref={ref}>
+      <button className="lang-switch-btn" onClick={() => setOpen(o => !o)} aria-haspopup="listbox" aria-expanded={open} title="Language">
+        {lang.toUpperCase()}
+      </button>
+      {open && (
+        <div className="lang-switch-menu" role="listbox">
+          {LANGS.map(l => (
+            <button
+              key={l.code}
+              className={`lang-switch-opt${l.code === lang ? ' active' : ''}`}
+              role="option"
+              aria-selected={l.code === lang}
+              onClick={() => { setLang(l.code); setOpen(false) }}
+            >
+              {l.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}