diff options
Diffstat (limited to 'packages/web-util/src/components/LangSelector.tsx')
| -rw-r--r-- | packages/web-util/src/components/LangSelector.tsx | 16 |
1 files changed, 10 insertions, 6 deletions
diff --git a/packages/web-util/src/components/LangSelector.tsx b/packages/web-util/src/components/LangSelector.tsx index a8d910129..7deaa0cf4 100644 --- a/packages/web-util/src/components/LangSelector.tsx +++ b/packages/web-util/src/components/LangSelector.tsx @@ -43,9 +43,9 @@ function getLangName(s: keyof LangsNames | string): string { return String(s); } -export function LangSelector({ supportedLangs }: { supportedLangs: string[] }): VNode { +export function LangSelector({ }: {}): VNode { const [updatingLang, setUpdatingLang] = useState(false); - const { lang, changeLanguage } = useTranslationContext(); + const { lang, changeLanguage, completness, supportedLang } = useTranslationContext(); const [hidden, setHidden] = useState(true); useEffect(() => { @@ -66,8 +66,9 @@ export function LangSelector({ supportedLangs }: { supportedLangs: string[] }): <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" - onClick={() => { - setHidden((h) => !h); + onClick={(e) => { + setHidden(!hidden); + e.stopPropagation() }}> <span class="flex items-center"> <img alt="language" class="h-5 w-5 flex-shrink-0 rounded-full" src={langIcon} /> @@ -82,7 +83,7 @@ export function LangSelector({ supportedLangs }: { supportedLangs: string[] }): {!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"> - {supportedLangs + {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" @@ -92,7 +93,10 @@ export function LangSelector({ supportedLangs }: { supportedLangs: string[] }): setHidden(true) }} > - <span class="font-normal block truncate">{getLangName(lang)}</span> + <span class="font-normal truncate flex justify-between "> + <span>{getLangName(lang)}</span> + <span>{(completness as any)[lang]}%</span> + </span> <span class="text-indigo-600 absolute inset-y-0 right-0 flex items-center pr-4"> {/* <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> |