introducing component

src/components/ui/LanguageSelect.jsx

@@ -0,0 +1,45 @@
+import React, { useState } from "react";
+import { useUser } from "../../hooks/useUser";
+
+export default function LanguageSelect() {
+	const { language, setLanguage, screensTranslations } = useUser();
+	const [isSubmenuOpen, setIsSubmenuOpen] = useState(false);
+
+	if (!screensTranslations || !screensTranslations.ui) return <p>loading translations…</p>;
+	const currentUiTranslations = screensTranslations.ui;
+
+	function handleShowHideSubmenu() {
+		setIsSubmenuOpen(!isSubmenuOpen);
+	}
+
+	function chooseLanguage(lang) {
+		setIsSubmenuOpen(false);
+		setLanguage(lang);
+	}
+
+	const supportedLanguages = ["FR", "EN", "ES", "PT", "DE", "DA", "FI", "PL", "CS", "SK", "MY"];
+
+	const languageOptions = supportedLanguages.map((lang) => (
+		<li key={lang} className='language-select__option' onClick={() => chooseLanguage(lang)}>
+			{/* <img className='flag' src={`/img/flags/32x32/${lang}.png`} alt={lang} /> */}
+			<img className='flag' src={`/img/flags/select/lhoist-${lang}.svg`} alt={lang} />
+			<span>{lang}</span>
+		</li>
+	));
+
+	return (
+		<>
+			<div className='language-select'>
+				<button className='language-select__toggle' onClick={handleShowHideSubmenu}>
+					<div className='flag'>
+						<img src={`/img/flags/select/lhoist-${language}.svg`} alt={language} />
+					</div>
+					<span className='language'>{language}</span>
+				</button>
+				<ul className='language-select__country-list' aria-hidden={!isSubmenuOpen}>
+					{languageOptions}
+				</ul>
+			</div>
+		</>
+	);
+}