60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import {useLocale} from 'next-intl';
|
|
import {useRouter, usePathname} from '@/i18n/navigation';
|
|
import {routing} from '@/i18n/routing';
|
|
import {useState} from 'react';
|
|
|
|
export default function LanguageSwitcher() {
|
|
const locale = useLocale();
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
const handleLocaleChange = (newLocale: string) => {
|
|
router.replace(pathname, {locale: newLocale});
|
|
router.refresh();
|
|
setIsOpen(false);
|
|
};
|
|
|
|
return (
|
|
<div className="relative z-[100]">
|
|
<button
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
className="px-3 py-1 border-2 border-slate-700 font-mono uppercase text-xs hover:border-cyan-500 transition-colors"
|
|
aria-label="Switch language"
|
|
>
|
|
{locale}
|
|
</button>
|
|
|
|
{isOpen && (
|
|
<div className="absolute right-0 top-full mt-2 bg-slate-900 border-2 border-slate-700 min-w-[120px] z-[100]">
|
|
{routing.locales.map((loc: string) => (
|
|
<button
|
|
key={loc}
|
|
onClick={() => handleLocaleChange(loc)}
|
|
className={`
|
|
w-full text-left px-4 py-2 font-mono uppercase text-xs
|
|
border-b border-slate-700 last:border-b-0
|
|
${locale === loc
|
|
? 'bg-cyan-900 text-cyan-300'
|
|
: 'text-slate-400 hover:bg-slate-800'
|
|
}
|
|
`}
|
|
>
|
|
{loc === 'en' ? 'English' : 'Română'}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{isOpen && (
|
|
<div
|
|
className="fixed inset-0 z-40"
|
|
onClick={() => setIsOpen(false)}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|