43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { useLocale } from 'next-intl';
|
|
import { useRouter, usePathname } from '@/i18n/navigation';
|
|
import { locales } from '@/i18n/routing';
|
|
|
|
export function LocaleSwitcher() {
|
|
const locale = useLocale();
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
|
|
const [currentLocale, setCurrentLocale] = useState(locale);
|
|
|
|
function switchLocale(next: string) {
|
|
setCurrentLocale(next);
|
|
router.replace(pathname, { locale: next });
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center gap-2 w-full py-2 hover:opacity-80">
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
src={`/flags/${currentLocale}.svg`}
|
|
alt={currentLocale}
|
|
className="w-5 h-5 rounded-sm object-cover"
|
|
/>
|
|
|
|
<select
|
|
value={currentLocale}
|
|
onChange={(e) => switchLocale(e.target.value)}
|
|
className="bg-transparent text-current cursor-pointer outline-none w-full"
|
|
>
|
|
{locales.map(({ code, label }) => (
|
|
<option value={code} key={code}>
|
|
{label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
);
|
|
}
|