50 lines
1.8 KiB
TypeScript
50 lines
1.8 KiB
TypeScript
|
import { Component, createSignal } from 'solid-js'
|
|||
|
|
import { Language, useI18n } from '../intl/i18n'
|
|||
|
|
import styles from '../styles/Button.module.css'
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Компонент переключателя языков
|
|||
|
|
*/
|
|||
|
|
const LanguageSwitcher: Component = () => {
|
|||
|
|
const { setLanguage, isRussian, language } = useI18n()
|
|||
|
|
const [isLoading, setIsLoading] = createSignal(false)
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Переключает язык между русским и английским
|
|||
|
|
*/
|
|||
|
|
const toggleLanguage = () => {
|
|||
|
|
const currentLang = language()
|
|||
|
|
const newLanguage: Language = isRussian() ? 'en' : 'ru'
|
|||
|
|
console.log('Переключение языка:', { from: currentLang, to: newLanguage })
|
|||
|
|
|
|||
|
|
// Показываем индикатор загрузки
|
|||
|
|
setIsLoading(true)
|
|||
|
|
|
|||
|
|
// Небольшая задержка для отображения индикатора
|
|||
|
|
setTimeout(() => {
|
|||
|
|
setLanguage(newLanguage)
|
|||
|
|
// Примечание: страница будет перезагружена, поэтому нет необходимости сбрасывать isLoading
|
|||
|
|
}, 100)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<button
|
|||
|
|
class={`${styles.button} ${styles.secondary} ${styles.small} ${styles['language-button']}`}
|
|||
|
|
onClick={toggleLanguage}
|
|||
|
|
onKeyDown={(e) => {
|
|||
|
|
if (e.key === 'Enter' || e.key === ' ') {
|
|||
|
|
e.preventDefault()
|
|||
|
|
toggleLanguage()
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
title={isRussian() ? 'Switch to English' : 'Переключить на русский'}
|
|||
|
|
aria-label={isRussian() ? 'Switch to English' : 'Переключить на русский'}
|
|||
|
|
disabled={isLoading()}
|
|||
|
|
>
|
|||
|
|
{isLoading() ? <span class={styles['language-loader']} /> : isRussian() ? 'EN' : 'RU'}
|
|||
|
|
</button>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default LanguageSwitcher
|