113 lines
2.9 KiB
TypeScript
113 lines
2.9 KiB
TypeScript
'use client'
|
|
|
|
import { useLocale } from 'next-intl'
|
|
import { usePathname, useRouter } from '@/i18n/navigation'
|
|
import { routing } from '@/i18n/routing'
|
|
import { useState, useRef, useEffect } from 'react'
|
|
import { useClickOutside } from '@/app/hooks/useClickOutside';
|
|
|
|
export default function LanguageSwitcher() {
|
|
const locale = useLocale();
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const dropdownRef = useRef<HTMLDivElement>(null);
|
|
|
|
const switchLanguage = (newLocale: string) => {
|
|
const currentLang = document.documentElement.getAttribute('lang') || 'ru';
|
|
router.replace(pathname, { locale: newLocale });
|
|
setIsOpen(false);
|
|
|
|
const observer = new MutationObserver((mutations) => {
|
|
const newLang = document.documentElement.getAttribute('lang')
|
|
|
|
if (newLang && newLang !== currentLang) {
|
|
observer.disconnect();
|
|
|
|
if (window.location.protocol === 'http:' && process.env.NODE_ENV !== 'development') {
|
|
setTimeout(() => window.location.reload(), 100)
|
|
}
|
|
}
|
|
})
|
|
|
|
if (window.location.protocol === 'http:' && process.env.NODE_ENV !== 'development') {
|
|
observer.observe(document.documentElement, {
|
|
attributes: true,
|
|
attributeFilter: ['lang', 'dir']
|
|
})
|
|
}
|
|
|
|
router.replace(pathname, { locale: newLocale })
|
|
|
|
setTimeout(() => {
|
|
observer.disconnect();
|
|
}, 3000)
|
|
}
|
|
|
|
useClickOutside(
|
|
dropdownRef,
|
|
() => {
|
|
setIsOpen(false);
|
|
},
|
|
isOpen
|
|
);
|
|
|
|
useEffect(() => {
|
|
const handleEscape = (event: KeyboardEvent) => {
|
|
if (event.key === 'Escape') setIsOpen(false)
|
|
}
|
|
|
|
document.addEventListener('keydown', handleEscape)
|
|
return () => document.removeEventListener('keydown', handleEscape)
|
|
}, []);
|
|
|
|
return (
|
|
<div className="language-switcher" ref={dropdownRef}>
|
|
<button
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
className="switcher-btn"
|
|
>
|
|
<span className="flex items-center">
|
|
<span className="mr-2">{locale === 'ru' ? 'РУ' : locale.toUpperCase()}</span>
|
|
</span>
|
|
<svg
|
|
className={`w-5 h-5 ml-2 transition-transform ${isOpen ? 'rotate-180' : ''}`}
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
|
|
{isOpen && (
|
|
<div className="switcher-list">
|
|
<ul
|
|
className="py-1"
|
|
role="listbox"
|
|
aria-labelledby="language-selector"
|
|
>
|
|
{routing.locales.map((lang) => (
|
|
<li key={lang} role="option">
|
|
<button
|
|
onClick={() => switchLanguage(lang)}
|
|
className={`language-btn ${locale === lang ? 'active' : ''
|
|
}`}
|
|
role="menuitem"
|
|
>
|
|
<span className="mr-2 font-medium">
|
|
{lang === 'ru' ? 'РУ' : lang.toUpperCase()}
|
|
</span>
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
} |