commit b6c8069a8176f308015cff82b3f2fd1b8e29df8f
parent 782d1d2352c748f6bd3dbbe525a42d88f4881def
Author: Sebastian <sebasjm@gmail.com>
Date: Mon, 16 Dec 2024 11:37:04 -0300
enable french in lang selector
Diffstat:
4 files changed, 66 insertions(+), 22 deletions(-)
diff --git a/packages/bank-ui/src/app.tsx b/packages/bank-ui/src/app.tsx
@@ -63,6 +63,12 @@ export function App() {
<TranslationProvider
source={strings}
completeness={{
+ uk: strings["uk"].completeness,
+ // tr: strings["tr"].completeness,
+ ru: strings["ru"].completeness,
+ // sv: strings["sv"].completeness,
+ it: strings["it"].completeness,
+ fr: strings["fr"].completeness,
es: strings["es"].completeness,
de: strings["de"].completeness,
}}
diff --git a/packages/merchant-backoffice-ui/src/Application.tsx b/packages/merchant-backoffice-ui/src/Application.tsx
@@ -99,8 +99,13 @@ export function Application(): VNode {
<TranslationProvider
source={strings}
completeness={{
- es: strings["es"].completeness,
uk: strings["uk"].completeness,
+ tr: strings["tr"].completeness,
+ // ru: strings["ru"].completeness,
+ sv: strings["sv"].completeness,
+ it: strings["it"].completeness,
+ fr: strings["fr"].completeness,
+ es: strings["es"].completeness,
de: strings["de"].completeness,
}}
>
diff --git a/packages/merchant-backoffice-ui/src/components/menu/LangSelector.tsx b/packages/merchant-backoffice-ui/src/components/menu/LangSelector.tsx
@@ -30,10 +30,14 @@ type LangsNames = {
};
const names: LangsNames = {
+ uk: "Українська [uk]",
+ tr: "Türkçe [tr]",
+ sv: "Svenska [sv]",
+ it: "Italiano [it]",
+ fr: "Français [fr]",
es: "Español [es]",
- en: "English [en]",
de: "Deutsch [de]",
- uk: "Українська [uk]",
+ en: "English [en]",
};
function getLangName(s: keyof LangsNames | string) {
diff --git a/packages/web-util/src/components/LangSelector.tsx b/packages/web-util/src/components/LangSelector.tsx
@@ -30,12 +30,15 @@ type LangsNames = {
};
const names: LangsNames = {
- es: "Español [es]",
- en: "English [en]",
- fr: "Français [fr]",
- de: "Deutsch [de]",
+ uk: "Українська [uk]",
+ tr: "Türkçe [tr]",
+ ru: "Ру́сский язы́к [ru]",
sv: "Svenska [sv]",
it: "Italiano [it]",
+ fr: "Français [fr]",
+ es: "Español [es]",
+ de: "Deutsch [de]",
+ en: "English [en]",
};
function getLangName(s: keyof LangsNames | string): string {
@@ -43,9 +46,10 @@ function getLangName(s: keyof LangsNames | string): string {
return String(s);
}
-export function LangSelector({ }: {}): VNode {
+export function LangSelector({}: {}): VNode {
const [updatingLang, setUpdatingLang] = useState(false);
- const { lang, changeLanguage, completeness, supportedLang } = useTranslationContext();
+ const { lang, changeLanguage, completeness, supportedLang } =
+ useTranslationContext();
const [hidden, setHidden] = useState(true);
useEffect(() => {
@@ -65,32 +69,59 @@ export function LangSelector({ }: {}): VNode {
return (
<div>
<div class="relative mt-2">
- <button type="button" class="relative w-full cursor-default rounded-md bg-white py-1.5 pl-3 pr-10 text-left text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label"
+ <button
+ type="button"
+ class="relative w-full cursor-default rounded-md bg-white py-1.5 pl-3 pr-10 text-left text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6"
+ aria-haspopup="listbox"
+ aria-expanded="true"
+ aria-labelledby="listbox-label"
onClick={(e) => {
setHidden(!hidden);
- e.stopPropagation()
- }}>
+ e.stopPropagation();
+ }}
+ >
<span class="flex items-center">
- <img alt="language" class="h-5 w-5 flex-shrink-0 rounded-full" src={langIcon} />
+ <img
+ alt="language"
+ class="h-5 w-5 flex-shrink-0 rounded-full"
+ src={langIcon}
+ />
<span class="ml-3 block truncate">{getLangName(lang)}</span>
</span>
<span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
- <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
- <path fill-rule="evenodd" d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z" clip-rule="evenodd" />
+ <svg
+ class="h-5 w-5 text-gray-400"
+ viewBox="0 0 20 20"
+ fill="currentColor"
+ aria-hidden="true"
+ >
+ <path
+ fill-rule="evenodd"
+ d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
+ clip-rule="evenodd"
+ />
</svg>
</span>
</button>
- {!hidden &&
- <ul class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm" tabIndex={-1} role="listbox" aria-labelledby="listbox-label" aria-activedescendant="listbox-option-3">
+ {!hidden && (
+ <ul
+ class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+ tabIndex={-1}
+ role="listbox"
+ aria-labelledby="listbox-label"
+ aria-activedescendant="listbox-option-3"
+ >
{Object.keys(supportedLang)
.filter((l) => l !== lang)
.map((lang) => (
- <li class="text-gray-900 hover:bg-indigo-600 hover:text-white cursor-pointer relative select-none py-2 pl-3 pr-9" role="option"
+ <li
+ class="text-gray-900 hover:bg-indigo-600 hover:text-white cursor-pointer relative select-none py-2 pl-3 pr-9"
+ role="option"
onClick={() => {
changeLanguage(lang);
setUpdatingLang(false);
- setHidden(true)
+ setHidden(true);
}}
>
<span class="font-normal truncate flex justify-between ">
@@ -105,10 +136,8 @@ export function LangSelector({ }: {}): VNode {
</span>
</li>
))}
-
</ul>
- }
-
+ )}
</div>
</div>
);
