🐛 fix(locale): Language Select

This commit is contained in:
web@ppanel 2024-12-19 12:12:29 +07:00
parent b243ab9006
commit 0befdb0864
78 changed files with 94 additions and 104 deletions

View File

@ -33,6 +33,6 @@
"uk-UA",
"vi-VN",
"zh-CN",
"zh-TW"
"zh-HK"
]
}

View File

@ -4,13 +4,7 @@ import { locales } from '@/config/constants';
import { setLocale } from '@/utils/common';
import { Icon } from '@iconify/react';
import { getCountry } from '@repo/ui/utils';
import { Button } from '@shadcn/ui/button';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from '@shadcn/ui/dropdown-menu';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@shadcn/ui/select';
import { useLocale, useTranslations } from 'next-intl';
import { useRouter } from 'next/navigation';
@ -20,30 +14,31 @@ export default function LanguageSwitch() {
const t = useTranslations('language');
const router = useRouter();
const handleLanguageChange = (value: string) => {
setLocale(value);
router.refresh();
};
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant='ghost' size='icon'>
<Icon icon={`flagpack:${country?.alpha2.toLowerCase()}`} className='!size-5' />
<span className='sr-only'>Switch Language</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align='end'>
<Select defaultValue={locale} onValueChange={handleLanguageChange}>
<SelectTrigger className='hover:bg-accent hover:text-accent-foreground w-auto border-none bg-transparent p-2 focus:ring-0 [&>svg]:hidden'>
<SelectValue>
<div className='flex items-center'>
<Icon icon={`flagpack:${country?.alpha2.toLowerCase()}`} className='!size-5' />
<span className='sr-only'>{t(`${locale}`)}</span>
</div>
</SelectValue>
</SelectTrigger>
<SelectContent>
{locales.map(getCountry).map((item) => (
<DropdownMenuItem
key={`${item?.lang}-${item?.alpha2}`}
onClick={() => {
setLocale(`${item?.lang}-${item?.alpha2}`);
router.refresh();
}}
>
<div className='flex items-center gap-1'>
<Icon icon={`flagpack:${item?.alpha2.toLowerCase()}`} />
<SelectItem key={`${item?.lang}-${item?.alpha2}`} value={`${item?.lang}-${item?.alpha2}`}>
<div className='flex items-center gap-2'>
<Icon icon={`flagpack:${item?.alpha2.toLowerCase()}`} className='!size-5' />
{t(`${item?.lang}-${item?.alpha2}`)}
</div>
</DropdownMenuItem>
</SelectItem>
))}
</DropdownMenuContent>
</DropdownMenu>
</SelectContent>
</Select>
);
}

View File

@ -22,7 +22,7 @@ export const locales = [
'uk-UA',
'vi-VN',
'zh-CN',
'zh-TW',
'zh-HK',
];
export const NEXT_PUBLIC_DEFAULT_LANGUAGE = env('NEXT_PUBLIC_DEFAULT_LANGUAGE') || locales[0];

View File

@ -20,5 +20,5 @@
"uk-UA": "Ukrajinština",
"vi-VN": "Vietnamština",
"zh-CN": "čeština (CS)",
"zh-TW": "čínština (tradiční)"
"zh-HK": "čínština (tradiční)"
}

View File

@ -20,5 +20,5 @@
"uk-UA": "Ukrainisch",
"vi-VN": "Vietnamesisch",
"zh-CN": "Chinesisch (vereinfacht)",
"zh-TW": "Chinesisch (Traditionell)"
"zh-HK": "Chinesisch (Traditionell)"
}

View File

@ -20,5 +20,5 @@
"uk-UA": "Ukrainian",
"vi-VN": "Vietnamese",
"zh-CN": "Chinese (Simplified)",
"zh-TW": "Chinese (Traditional)"
"zh-HK": "Chinese (Traditional)"
}

View File

@ -20,5 +20,5 @@
"uk-UA": "Ucraniano",
"vi-VN": "Vietnamita",
"zh-CN": "Español (España)",
"zh-TW": "chino (tradicional)"
"zh-HK": "chino (tradicional)"
}

View File

@ -20,5 +20,5 @@
"uk-UA": "Ucraniano",
"vi-VN": "Vietnamita",
"zh-CN": "español (México)",
"zh-TW": "Chino (Tradicional)"
"zh-HK": "Chino (Tradicional)"
}

View File

@ -20,5 +20,5 @@
"uk-UA": "ukrainaksi",
"vi-VN": "vietnamiksi",
"zh-CN": "kiina (yksinkertaistettu)",
"zh-TW": "kiina (perinteinen)"
"zh-HK": "kiina (perinteinen)"
}

View File

@ -20,5 +20,5 @@
"uk-UA": "Ukrainien",
"vi-VN": "Vietnamien",
"zh-CN": "français (France)",
"zh-TW": "chinois (traditionnel)"
"zh-HK": "chinois (traditionnel)"
}

View File

@ -20,5 +20,5 @@
"uk-UA": "यूक्रेनी",
"vi-VN": "वियतनामी",
"zh-CN": "चीनी (सरल)",
"zh-TW": "चीनी (पारंपरिक)"
"zh-HK": "चीनी (पारंपरिक)"
}

View File

@ -20,5 +20,5 @@
"uk-UA": "ukrán",
"vi-VN": "vietnámi",
"zh-CN": "kínai (egyszerűsített)",
"zh-TW": "Kínai (hagyományos)"
"zh-HK": "Kínai (hagyományos)"
}

View File

@ -20,5 +20,5 @@
"uk-UA": "ウクライナ語",
"vi-VN": "ベトナム語",
"zh-CN": "日本語",
"zh-TW": "中国語(繁体字)"
"zh-HK": "中国語(繁体字)"
}

View File

@ -20,5 +20,5 @@
"uk-UA": "우크라이나어",
"vi-VN": "베트남어",
"zh-CN": "중국어(간체)",
"zh-TW": "중국어(번체)"
"zh-HK": "중국어(번체)"
}

View File

@ -20,5 +20,5 @@
"uk-UA": "Ukrainsk",
"vi-VN": "Vietnamesisk",
"zh-CN": "Kinesisk (forenklet)",
"zh-TW": "Kinesisk (tradisjonell)"
"zh-HK": "Kinesisk (tradisjonell)"
}

View File

@ -20,5 +20,5 @@
"uk-UA": "ukraiński",
"vi-VN": "język wietnamski",
"zh-CN": "chiński (uproszczony)",
"zh-TW": "chiński (tradycyjny)"
"zh-HK": "chiński (tradycyjny)"
}

View File

@ -20,5 +20,5 @@
"uk-UA": "Ucraniano",
"vi-VN": "Vietnamita",
"zh-CN": "Chinês (Simplificado)",
"zh-TW": "Chinês (Tradicional)"
"zh-HK": "Chinês (Tradicional)"
}

View File

@ -20,5 +20,5 @@
"uk-UA": "Ucraineană",
"vi-VN": "Vietnameză",
"zh-CN": "Chineză (Simplificată)",
"zh-TW": "Chineză (tradițională)"
"zh-HK": "Chineză (tradițională)"
}

View File

@ -20,5 +20,5 @@
"uk-UA": "Украинский",
"vi-VN": "вьетнамский",
"zh-CN": "Китайский (упрощенный)",
"zh-TW": "китайский (традиционный)"
"zh-HK": "китайский (традиционный)"
}

View File

@ -20,5 +20,5 @@
"uk-UA": "ยูเครน",
"vi-VN": "ภาษาเวียดนาม",
"zh-CN": "ภาษาไทย",
"zh-TW": "ภาษาจีน (ตัวเต็ม)"
"zh-HK": "ภาษาจีน (ตัวเต็ม)"
}

View File

@ -20,5 +20,5 @@
"uk-UA": "Ukraynaca",
"vi-VN": "Vietnamca",
"zh-CN": "Çince (Basitleştirilmiş)",
"zh-TW": "Çince (Geleneksel)"
"zh-HK": "Çince (Geleneksel)"
}

View File

@ -20,5 +20,5 @@
"uk-UA": "українська мова",
"vi-VN": "В'єтнамська",
"zh-CN": "українська (Україна)",
"zh-TW": "китайська (традиційна)"
"zh-HK": "китайська (традиційна)"
}

View File

@ -20,5 +20,5 @@
"uk-UA": "Tiếng Ukraina",
"vi-VN": "Tiếng Việt",
"zh-CN": "Tiếng Trung (Giản thể)",
"zh-TW": "Tiếng Trung (Phồn thể)"
"zh-HK": "Tiếng Trung (Phồn thể)"
}

View File

@ -20,5 +20,5 @@
"uk-UA": "乌克兰语",
"vi-VN": "越南语",
"zh-CN": "中文(简体)",
"zh-TW": "中文(繁体)"
"zh-HK": "中文(繁体)"
}

View File

@ -19,6 +19,6 @@
"tr-TR": "土耳其語",
"uk-UA": "烏克蘭語",
"vi-VN": "越南語",
"zh-CN": "中文(繁體)",
"zh-TW": "中文(繁體)"
"zh-CN": "中文(简体)",
"zh-HK": "中文(繁體)"
}

View File

@ -33,6 +33,6 @@
"uk-UA",
"vi-VN",
"zh-CN",
"zh-TW"
"zh-HK"
]
}

View File

@ -4,13 +4,7 @@ import { locales } from '@/config/constants';
import { setLocale } from '@/utils/common';
import { Icon } from '@iconify/react';
import { getCountry } from '@repo/ui/utils';
import { Button } from '@shadcn/ui/button';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from '@shadcn/ui/dropdown-menu';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@shadcn/ui/select';
import { useLocale, useTranslations } from 'next-intl';
import { useRouter } from 'next/navigation';
@ -20,30 +14,31 @@ export default function LanguageSwitch() {
const t = useTranslations('language');
const router = useRouter();
const handleLanguageChange = (value: string) => {
setLocale(value);
router.refresh();
};
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant='ghost' size='icon'>
<Icon icon={`flagpack:${country?.alpha2.toLowerCase()}`} className='!size-5' />
<span className='sr-only'>Switch Language</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align='end'>
<Select defaultValue={locale} onValueChange={handleLanguageChange}>
<SelectTrigger className='hover:bg-accent hover:text-accent-foreground w-auto border-none bg-transparent p-2 focus:ring-0 [&>svg]:hidden'>
<SelectValue>
<div className='flex items-center'>
<Icon icon={`flagpack:${country?.alpha2.toLowerCase()}`} className='!size-5' />
<span className='sr-only'>{t(`${locale}`)}</span>
</div>
</SelectValue>
</SelectTrigger>
<SelectContent>
{locales.map(getCountry).map((item) => (
<DropdownMenuItem
key={`${item?.lang}-${item?.alpha2}`}
onClick={() => {
setLocale(`${item?.lang}-${item?.alpha2}`);
router.refresh();
}}
>
<div className='flex items-center gap-1'>
<Icon icon={`flagpack:${item?.alpha2.toLowerCase()}`} />
<SelectItem key={`${item?.lang}-${item?.alpha2}`} value={`${item?.lang}-${item?.alpha2}`}>
<div className='flex items-center gap-2'>
<Icon icon={`flagpack:${item?.alpha2.toLowerCase()}`} className='!size-5' />
{t(`${item?.lang}-${item?.alpha2}`)}
</div>
</DropdownMenuItem>
</SelectItem>
))}
</DropdownMenuContent>
</DropdownMenu>
</SelectContent>
</Select>
);
}

View File

@ -22,7 +22,7 @@ export const locales = [
'uk-UA',
'vi-VN',
'zh-CN',
'zh-TW',
'zh-HK',
];
export const NEXT_PUBLIC_DEFAULT_LANGUAGE = env('NEXT_PUBLIC_DEFAULT_LANGUAGE') || locales[0];

View File

@ -20,5 +20,5 @@
"uk-UA": "Ukrajinština",
"vi-VN": "Vietnamština",
"zh-CN": "čeština (CS)",
"zh-TW": "čínština (tradiční)"
"zh-HK": "čínština (tradiční)"
}

View File

@ -20,5 +20,5 @@
"uk-UA": "Ukrainisch",
"vi-VN": "Vietnamesisch",
"zh-CN": "Chinesisch (vereinfacht)",
"zh-TW": "Chinesisch (Traditionell)"
"zh-HK": "Chinesisch (Traditionell)"
}

View File

@ -20,5 +20,5 @@
"uk-UA": "Ukrainian",
"vi-VN": "Vietnamese",
"zh-CN": "Chinese (Simplified)",
"zh-TW": "Chinese (Traditional)"
"zh-HK": "Chinese (Traditional)"
}

View File

@ -20,5 +20,5 @@
"uk-UA": "Ucraniano",
"vi-VN": "Vietnamita",
"zh-CN": "chino (simplificado)",
"zh-TW": "chino (tradicional)"
"zh-HK": "chino (tradicional)"
}

View File

@ -20,5 +20,5 @@
"uk-UA": "Ucraniano",
"vi-VN": "Vietnamita",
"zh-CN": "español (México)",
"zh-TW": "Chino (Tradicional)"
"zh-HK": "Chino (Tradicional)"
}

View File

@ -20,5 +20,5 @@
"uk-UA": "ukrainaksi",
"vi-VN": "Vietnamin kieli",
"zh-CN": "kiina (yksinkertaistettu)",
"zh-TW": "kiina (perinteinen)"
"zh-HK": "kiina (perinteinen)"
}

View File

@ -20,5 +20,5 @@
"uk-UA": "Ukrainien",
"vi-VN": "Vietnamien",
"zh-CN": "français (France)",
"zh-TW": "Chinois (traditionnel)"
"zh-HK": "Chinois (traditionnel)"
}

View File

@ -20,5 +20,5 @@
"uk-UA": "यूक्रेनी",
"vi-VN": "वियतनामी",
"zh-CN": "हिन्दी (भारत)",
"zh-TW": "चीनी (पारंपरिक)"
"zh-HK": "चीनी (पारंपरिक)"
}

View File

@ -20,5 +20,5 @@
"uk-UA": "ukrán",
"vi-VN": "vietnámi",
"zh-CN": "kínai (egyszerűsített)",
"zh-TW": "Kínai (hagyományos)"
"zh-HK": "Kínai (hagyományos)"
}

View File

@ -20,5 +20,5 @@
"uk-UA": "ウクライナ語",
"vi-VN": "ベトナム語",
"zh-CN": "日本語",
"zh-TW": "中国語(繁体)"
"zh-HK": "中国語(繁体)"
}

View File

@ -20,5 +20,5 @@
"uk-UA": "우크라이나어",
"vi-VN": "베트남어",
"zh-CN": "한국어",
"zh-TW": "중국어(번체)"
"zh-HK": "중국어(번체)"
}

View File

@ -20,5 +20,5 @@
"uk-UA": "Ukrainsk",
"vi-VN": "Vietnamesisk",
"zh-CN": "Kinesisk (forenklet)",
"zh-TW": "Kinesisk (tradisjonell)"
"zh-HK": "Kinesisk (tradisjonell)"
}

View File

@ -20,5 +20,5 @@
"uk-UA": "ukraiński",
"vi-VN": "język wietnamski",
"zh-CN": "polski",
"zh-TW": "chiński (tradycyjny)"
"zh-HK": "chiński (tradycyjny)"
}

View File

@ -20,5 +20,5 @@
"uk-UA": "Ucraniano",
"vi-VN": "Vietnamita",
"zh-CN": "Chinês (Simplificado)",
"zh-TW": "Chinês (Tradicional)"
"zh-HK": "Chinês (Tradicional)"
}

View File

@ -20,5 +20,5 @@
"uk-UA": "Ucraineană",
"vi-VN": "Vietnameză",
"zh-CN": "Chineză (Simplificată)",
"zh-TW": "Chineză (tradițională)"
"zh-HK": "Chineză (tradițională)"
}

View File

@ -20,5 +20,5 @@
"uk-UA": "Украинский",
"vi-VN": "Вьетнамский",
"zh-CN": "русский",
"zh-TW": "Китайский (традиционный)"
"zh-HK": "Китайский (традиционный)"
}

View File

@ -20,5 +20,5 @@
"uk-UA": "ยูเครน",
"vi-VN": "ภาษาเวียดนาม",
"zh-CN": "ภาษาไทย",
"zh-TW": "ภาษาจีน (ตัวเต็ม)"
"zh-HK": "ภาษาจีน (ตัวเต็ม)"
}

View File

@ -20,5 +20,5 @@
"uk-UA": "Ukraynaca",
"vi-VN": "Vietnamca",
"zh-CN": "Çince (Basitleştirilmiş)",
"zh-TW": "Çince (Geleneksel)"
"zh-HK": "Çince (Geleneksel)"
}

View File

@ -20,5 +20,5 @@
"uk-UA": "Українська",
"vi-VN": "В'єтнамська",
"zh-CN": "українська (Україна)",
"zh-TW": "китайська (традиційна)"
"zh-HK": "китайська (традиційна)"
}

View File

@ -20,5 +20,5 @@
"uk-UA": "Tiếng Ukraina",
"vi-VN": "Tiếng Việt",
"zh-CN": "Tiếng Trung (Giản thể)",
"zh-TW": "Tiếng Trung (Phồn thể)"
"zh-HK": "Tiếng Trung (Phồn thể)"
}

View File

@ -20,5 +20,5 @@
"uk-UA": "乌克兰语",
"vi-VN": "越南语",
"zh-CN": "中文(简体)",
"zh-TW": "中文(繁体)"
"zh-HK": "中文(繁体)"
}

View File

@ -19,6 +19,6 @@
"tr-TR": "土耳其語",
"uk-UA": "烏克蘭語",
"vi-VN": "越南語",
"zh-CN": "中文(繁體)",
"zh-TW": "中文(繁體)"
"zh-CN": "中文(简体)",
"zh-HK": "中文(繁體)"
}