54 lines
1.6 KiB
TypeScript
54 lines
1.6 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>
|
|
)
|
|
}
|