🐛 fix(locale): Language Select
This commit is contained in:
parent
b243ab9006
commit
0befdb0864
@ -33,6 +33,6 @@
|
||||
"uk-UA",
|
||||
"vi-VN",
|
||||
"zh-CN",
|
||||
"zh-TW"
|
||||
"zh-HK"
|
||||
]
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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];
|
||||
|
||||
@ -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í)"
|
||||
}
|
||||
|
||||
@ -20,5 +20,5 @@
|
||||
"uk-UA": "Ukrainisch",
|
||||
"vi-VN": "Vietnamesisch",
|
||||
"zh-CN": "Chinesisch (vereinfacht)",
|
||||
"zh-TW": "Chinesisch (Traditionell)"
|
||||
"zh-HK": "Chinesisch (Traditionell)"
|
||||
}
|
||||
|
||||
@ -20,5 +20,5 @@
|
||||
"uk-UA": "Ukrainian",
|
||||
"vi-VN": "Vietnamese",
|
||||
"zh-CN": "Chinese (Simplified)",
|
||||
"zh-TW": "Chinese (Traditional)"
|
||||
"zh-HK": "Chinese (Traditional)"
|
||||
}
|
||||
|
||||
@ -20,5 +20,5 @@
|
||||
"uk-UA": "Ucraniano",
|
||||
"vi-VN": "Vietnamita",
|
||||
"zh-CN": "Español (España)",
|
||||
"zh-TW": "chino (tradicional)"
|
||||
"zh-HK": "chino (tradicional)"
|
||||
}
|
||||
|
||||
@ -20,5 +20,5 @@
|
||||
"uk-UA": "Ucraniano",
|
||||
"vi-VN": "Vietnamita",
|
||||
"zh-CN": "español (México)",
|
||||
"zh-TW": "Chino (Tradicional)"
|
||||
"zh-HK": "Chino (Tradicional)"
|
||||
}
|
||||
|
||||
@ -20,5 +20,5 @@
|
||||
"uk-UA": "ukrainaksi",
|
||||
"vi-VN": "vietnamiksi",
|
||||
"zh-CN": "kiina (yksinkertaistettu)",
|
||||
"zh-TW": "kiina (perinteinen)"
|
||||
"zh-HK": "kiina (perinteinen)"
|
||||
}
|
||||
|
||||
@ -20,5 +20,5 @@
|
||||
"uk-UA": "Ukrainien",
|
||||
"vi-VN": "Vietnamien",
|
||||
"zh-CN": "français (France)",
|
||||
"zh-TW": "chinois (traditionnel)"
|
||||
"zh-HK": "chinois (traditionnel)"
|
||||
}
|
||||
|
||||
@ -20,5 +20,5 @@
|
||||
"uk-UA": "यूक्रेनी",
|
||||
"vi-VN": "वियतनामी",
|
||||
"zh-CN": "चीनी (सरल)",
|
||||
"zh-TW": "चीनी (पारंपरिक)"
|
||||
"zh-HK": "चीनी (पारंपरिक)"
|
||||
}
|
||||
|
||||
@ -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)"
|
||||
}
|
||||
|
||||
@ -20,5 +20,5 @@
|
||||
"uk-UA": "ウクライナ語",
|
||||
"vi-VN": "ベトナム語",
|
||||
"zh-CN": "日本語",
|
||||
"zh-TW": "中国語(繁体字)"
|
||||
"zh-HK": "中国語(繁体字)"
|
||||
}
|
||||
|
||||
@ -20,5 +20,5 @@
|
||||
"uk-UA": "우크라이나어",
|
||||
"vi-VN": "베트남어",
|
||||
"zh-CN": "중국어(간체)",
|
||||
"zh-TW": "중국어(번체)"
|
||||
"zh-HK": "중국어(번체)"
|
||||
}
|
||||
|
||||
@ -20,5 +20,5 @@
|
||||
"uk-UA": "Ukrainsk",
|
||||
"vi-VN": "Vietnamesisk",
|
||||
"zh-CN": "Kinesisk (forenklet)",
|
||||
"zh-TW": "Kinesisk (tradisjonell)"
|
||||
"zh-HK": "Kinesisk (tradisjonell)"
|
||||
}
|
||||
|
||||
@ -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)"
|
||||
}
|
||||
|
||||
@ -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)"
|
||||
}
|
||||
|
||||
@ -20,5 +20,5 @@
|
||||
"uk-UA": "Ucraineană",
|
||||
"vi-VN": "Vietnameză",
|
||||
"zh-CN": "Chineză (Simplificată)",
|
||||
"zh-TW": "Chineză (tradițională)"
|
||||
"zh-HK": "Chineză (tradițională)"
|
||||
}
|
||||
|
||||
@ -20,5 +20,5 @@
|
||||
"uk-UA": "Украинский",
|
||||
"vi-VN": "вьетнамский",
|
||||
"zh-CN": "Китайский (упрощенный)",
|
||||
"zh-TW": "китайский (традиционный)"
|
||||
"zh-HK": "китайский (традиционный)"
|
||||
}
|
||||
|
||||
@ -20,5 +20,5 @@
|
||||
"uk-UA": "ยูเครน",
|
||||
"vi-VN": "ภาษาเวียดนาม",
|
||||
"zh-CN": "ภาษาไทย",
|
||||
"zh-TW": "ภาษาจีน (ตัวเต็ม)"
|
||||
"zh-HK": "ภาษาจีน (ตัวเต็ม)"
|
||||
}
|
||||
|
||||
@ -20,5 +20,5 @@
|
||||
"uk-UA": "Ukraynaca",
|
||||
"vi-VN": "Vietnamca",
|
||||
"zh-CN": "Çince (Basitleştirilmiş)",
|
||||
"zh-TW": "Çince (Geleneksel)"
|
||||
"zh-HK": "Çince (Geleneksel)"
|
||||
}
|
||||
|
||||
@ -20,5 +20,5 @@
|
||||
"uk-UA": "українська мова",
|
||||
"vi-VN": "В'єтнамська",
|
||||
"zh-CN": "українська (Україна)",
|
||||
"zh-TW": "китайська (традиційна)"
|
||||
"zh-HK": "китайська (традиційна)"
|
||||
}
|
||||
|
||||
@ -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ể)"
|
||||
}
|
||||
|
||||
@ -20,5 +20,5 @@
|
||||
"uk-UA": "乌克兰语",
|
||||
"vi-VN": "越南语",
|
||||
"zh-CN": "中文(简体)",
|
||||
"zh-TW": "中文(繁体)"
|
||||
"zh-HK": "中文(繁体)"
|
||||
}
|
||||
|
||||
@ -19,6 +19,6 @@
|
||||
"tr-TR": "土耳其語",
|
||||
"uk-UA": "烏克蘭語",
|
||||
"vi-VN": "越南語",
|
||||
"zh-CN": "中文(繁體)",
|
||||
"zh-TW": "中文(繁體)"
|
||||
"zh-CN": "中文(简体)",
|
||||
"zh-HK": "中文(繁體)"
|
||||
}
|
||||
@ -33,6 +33,6 @@
|
||||
"uk-UA",
|
||||
"vi-VN",
|
||||
"zh-CN",
|
||||
"zh-TW"
|
||||
"zh-HK"
|
||||
]
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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];
|
||||
|
||||
@ -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í)"
|
||||
}
|
||||
|
||||
@ -20,5 +20,5 @@
|
||||
"uk-UA": "Ukrainisch",
|
||||
"vi-VN": "Vietnamesisch",
|
||||
"zh-CN": "Chinesisch (vereinfacht)",
|
||||
"zh-TW": "Chinesisch (Traditionell)"
|
||||
"zh-HK": "Chinesisch (Traditionell)"
|
||||
}
|
||||
|
||||
@ -20,5 +20,5 @@
|
||||
"uk-UA": "Ukrainian",
|
||||
"vi-VN": "Vietnamese",
|
||||
"zh-CN": "Chinese (Simplified)",
|
||||
"zh-TW": "Chinese (Traditional)"
|
||||
"zh-HK": "Chinese (Traditional)"
|
||||
}
|
||||
|
||||
@ -20,5 +20,5 @@
|
||||
"uk-UA": "Ucraniano",
|
||||
"vi-VN": "Vietnamita",
|
||||
"zh-CN": "chino (simplificado)",
|
||||
"zh-TW": "chino (tradicional)"
|
||||
"zh-HK": "chino (tradicional)"
|
||||
}
|
||||
|
||||
@ -20,5 +20,5 @@
|
||||
"uk-UA": "Ucraniano",
|
||||
"vi-VN": "Vietnamita",
|
||||
"zh-CN": "español (México)",
|
||||
"zh-TW": "Chino (Tradicional)"
|
||||
"zh-HK": "Chino (Tradicional)"
|
||||
}
|
||||
|
||||
@ -20,5 +20,5 @@
|
||||
"uk-UA": "ukrainaksi",
|
||||
"vi-VN": "Vietnamin kieli",
|
||||
"zh-CN": "kiina (yksinkertaistettu)",
|
||||
"zh-TW": "kiina (perinteinen)"
|
||||
"zh-HK": "kiina (perinteinen)"
|
||||
}
|
||||
|
||||
@ -20,5 +20,5 @@
|
||||
"uk-UA": "Ukrainien",
|
||||
"vi-VN": "Vietnamien",
|
||||
"zh-CN": "français (France)",
|
||||
"zh-TW": "Chinois (traditionnel)"
|
||||
"zh-HK": "Chinois (traditionnel)"
|
||||
}
|
||||
|
||||
@ -20,5 +20,5 @@
|
||||
"uk-UA": "यूक्रेनी",
|
||||
"vi-VN": "वियतनामी",
|
||||
"zh-CN": "हिन्दी (भारत)",
|
||||
"zh-TW": "चीनी (पारंपरिक)"
|
||||
"zh-HK": "चीनी (पारंपरिक)"
|
||||
}
|
||||
|
||||
@ -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)"
|
||||
}
|
||||
|
||||
@ -20,5 +20,5 @@
|
||||
"uk-UA": "ウクライナ語",
|
||||
"vi-VN": "ベトナム語",
|
||||
"zh-CN": "日本語",
|
||||
"zh-TW": "中国語(繁体)"
|
||||
"zh-HK": "中国語(繁体)"
|
||||
}
|
||||
|
||||
@ -20,5 +20,5 @@
|
||||
"uk-UA": "우크라이나어",
|
||||
"vi-VN": "베트남어",
|
||||
"zh-CN": "한국어",
|
||||
"zh-TW": "중국어(번체)"
|
||||
"zh-HK": "중국어(번체)"
|
||||
}
|
||||
|
||||
@ -20,5 +20,5 @@
|
||||
"uk-UA": "Ukrainsk",
|
||||
"vi-VN": "Vietnamesisk",
|
||||
"zh-CN": "Kinesisk (forenklet)",
|
||||
"zh-TW": "Kinesisk (tradisjonell)"
|
||||
"zh-HK": "Kinesisk (tradisjonell)"
|
||||
}
|
||||
|
||||
@ -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)"
|
||||
}
|
||||
|
||||
@ -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)"
|
||||
}
|
||||
|
||||
@ -20,5 +20,5 @@
|
||||
"uk-UA": "Ucraineană",
|
||||
"vi-VN": "Vietnameză",
|
||||
"zh-CN": "Chineză (Simplificată)",
|
||||
"zh-TW": "Chineză (tradițională)"
|
||||
"zh-HK": "Chineză (tradițională)"
|
||||
}
|
||||
|
||||
@ -20,5 +20,5 @@
|
||||
"uk-UA": "Украинский",
|
||||
"vi-VN": "Вьетнамский",
|
||||
"zh-CN": "русский",
|
||||
"zh-TW": "Китайский (традиционный)"
|
||||
"zh-HK": "Китайский (традиционный)"
|
||||
}
|
||||
|
||||
@ -20,5 +20,5 @@
|
||||
"uk-UA": "ยูเครน",
|
||||
"vi-VN": "ภาษาเวียดนาม",
|
||||
"zh-CN": "ภาษาไทย",
|
||||
"zh-TW": "ภาษาจีน (ตัวเต็ม)"
|
||||
"zh-HK": "ภาษาจีน (ตัวเต็ม)"
|
||||
}
|
||||
|
||||
@ -20,5 +20,5 @@
|
||||
"uk-UA": "Ukraynaca",
|
||||
"vi-VN": "Vietnamca",
|
||||
"zh-CN": "Çince (Basitleştirilmiş)",
|
||||
"zh-TW": "Çince (Geleneksel)"
|
||||
"zh-HK": "Çince (Geleneksel)"
|
||||
}
|
||||
|
||||
@ -20,5 +20,5 @@
|
||||
"uk-UA": "Українська",
|
||||
"vi-VN": "В'єтнамська",
|
||||
"zh-CN": "українська (Україна)",
|
||||
"zh-TW": "китайська (традиційна)"
|
||||
"zh-HK": "китайська (традиційна)"
|
||||
}
|
||||
|
||||
@ -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ể)"
|
||||
}
|
||||
|
||||
@ -20,5 +20,5 @@
|
||||
"uk-UA": "乌克兰语",
|
||||
"vi-VN": "越南语",
|
||||
"zh-CN": "中文(简体)",
|
||||
"zh-TW": "中文(繁体)"
|
||||
"zh-HK": "中文(繁体)"
|
||||
}
|
||||
|
||||
@ -19,6 +19,6 @@
|
||||
"tr-TR": "土耳其語",
|
||||
"uk-UA": "烏克蘭語",
|
||||
"vi-VN": "越南語",
|
||||
"zh-CN": "中文(繁體)",
|
||||
"zh-TW": "中文(繁體)"
|
||||
"zh-CN": "中文(简体)",
|
||||
"zh-HK": "中文(繁體)"
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user