87 lines
2.7 KiB
TypeScript
87 lines
2.7 KiB
TypeScript
'use client';
|
|
|
|
import SvgIcon from '@/components/SvgIcon';
|
|
import { setLocale } from '@/utils/common';
|
|
import { getCountry } from '@workspace/airo-ui/utils';
|
|
import { useLocale } from 'next-intl';
|
|
import { useRouter } from 'next/navigation';
|
|
|
|
const languages = {
|
|
'cs-CZ': 'Čeština',
|
|
'de-DE': 'Deutsch',
|
|
'en-US': 'English',
|
|
'es-ES': 'Español',
|
|
'es-MX': 'Español (México)',
|
|
'fa-IR': 'فارسی',
|
|
'fi-FI': 'Suomi',
|
|
'fr-FR': 'Français',
|
|
'hi-IN': 'हिन्दी',
|
|
'hu-HU': 'Magyar',
|
|
'ja-JP': '日本語',
|
|
'ko-KR': '한국어',
|
|
'no-NO': 'Norsk',
|
|
'pl-PL': 'Polski',
|
|
'pt-BR': 'Português (Brasil)',
|
|
'ro-RO': 'Română',
|
|
'ru-RU': 'Русский',
|
|
'th-TH': 'ไทย',
|
|
'tr-TR': 'Türkçe',
|
|
'uk-UA': 'Українська',
|
|
'vi-VN': 'Tiếng Việt',
|
|
'zh-CN': '简体中文',
|
|
// 'zh-HK': '繁體中文',
|
|
} as const;
|
|
|
|
export default function LanguageSwitch() {
|
|
const locale = useLocale();
|
|
const country = getCountry(locale);
|
|
const router = useRouter();
|
|
|
|
const handleLanguageChange = (value: string) => {
|
|
setLocale(value);
|
|
router.refresh();
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<div
|
|
className='flex items-center rounded-full'
|
|
onClick={() => {
|
|
console.log(locale, 111);
|
|
if (locale === 'en-US') {
|
|
handleLanguageChange('zh-CN');
|
|
} else {
|
|
handleLanguageChange('en-US');
|
|
}
|
|
}}
|
|
>
|
|
<SvgIcon
|
|
name={locale === 'en-US' ? 'language-zh' : 'language'}
|
|
className={'cursor-pointer text-[#EAEAEA] hover:text-[#B5C9E2]'}
|
|
/>
|
|
<span className='sr-only'>{languages[locale as keyof typeof languages]}</span>
|
|
</div>
|
|
</div>
|
|
/*<Select defaultValue={locale} onValueChange={handleLanguageChange}>
|
|
<SelectTrigger className='hover:bg-accent hover:text-accent-foreground w-auto rounded-full border-none bg-transparent p-1 shadow-none focus:ring-0 [&>svg]:hidden'>
|
|
<SelectValue>
|
|
<div className='flex items-center'>
|
|
<SvgIcon name={'language'} />
|
|
<span className='sr-only'>{languages[locale as keyof typeof languages]}</span>
|
|
</div>
|
|
</SelectValue>
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{locales.map(getCountry).map((item) => (
|
|
<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' />
|
|
{languages[`${item?.lang}-${item?.alpha2}` as keyof typeof languages]}
|
|
</div>
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>*/
|
|
);
|
|
}
|