Skip to content

Commit

Permalink
improve language dropdown ui
Browse files Browse the repository at this point in the history
Rate limit · GitHub

Access has been restricted

You have triggered a rate limit.

Please wait a few minutes before you try again;
in some cases this may take up to an hour.

amir1376 committed Nov 19, 2024
1 parent 1705da3 commit 4fad896
Showing 2 changed files with 15 additions and 7 deletions.
1 change: 0 additions & 1 deletion src/i18n/LanguageInfo.ts
Original file line number Diff line number Diff line change
@@ -70,7 +70,6 @@ export function isRtl(locale:MyLocale) {
export function getLocaleName(localeName:MyLocale):LanguageName|undefined {
if (localeName.country){
const found = languageNames[`${localeName.language}-${localeName.country}`]
console.log(`${localeName.language}-${localeName.country}`,languageNames)
if (found){
return found
}
21 changes: 15 additions & 6 deletions src/sections/Header.tsx
Original file line number Diff line number Diff line change
@@ -7,7 +7,6 @@ import {
getLanguagesInfo,
useChangeLanguage,
useCurrentDirection, useCurrentLanguageInfo, useCurrentLocale,
useCurrentLocaleString,
useTranslate
} from "~/abstraction/i18n";
import {MyLink} from "~/abstraction/navigation";
@@ -76,7 +75,13 @@ function Theme() {
function LanguageItem(props: { language: LanguageInfo, active: boolean }) {
return <div
dir="ltr"
className="flex flex-row flex-nowrap">
className={classNames(
"flex flex-row flex-nowrap",
"border",
props.active
? "bg-base-content/15 border-base-content/15"
: "border-transparent"
)}>
<div className="text-2xl">
{props.language.flag}
</div>
@@ -86,9 +91,13 @@ function LanguageItem(props: { language: LanguageInfo, active: boolean }) {
</div>
<div className="w-2"/>
<div className="flex-1"/>
{props.active && (
<Icon icon="mdi:done"/>
)}
<Icon
className={classNames(
"transform transition",
!props.active && "scale-0 opacity-0",
)}
icon="mdi:done"
/>
</div>
}

@@ -123,7 +132,7 @@ function LanguageDropDown() {
</div>
<ul tabIndex={0} className="dropdown-content menu-lg rounded shadow-lg menu bg-base-200">
{Object.values(languages).map(lang => (
<li className="min-w-36" onClick={() => changeLang(lang.code)} key={lang.code}>
<li className="" onClick={() => changeLang(lang.code)} key={lang.code}>
<LanguageItem language={lang} active={currentLanguageInfo?.code == lang.code}/>
</li>
))}

0 comments on commit 4fad896

Please sign in to comment.