7195064f12
Add locale-prefixed routes for admin, auth, dashboard, and public pages. Add error, loading, and not-found pages for locale context. Add language switcher UI component for Vietnamese/English toggle. Co-Authored-By: Paperclip <noreply@paperclip.ing>
36 lines
1.2 KiB
TypeScript
36 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
import { useLocale, useTranslations } from 'next-intl';
|
|
import type { Locale } from '@/i18n/config';
|
|
import { usePathname, useRouter } from '@/i18n/navigation';
|
|
|
|
const localeLabels: Record<Locale, string> = {
|
|
vi: '🇻🇳 VI',
|
|
en: '🇬🇧 EN',
|
|
};
|
|
|
|
export function LanguageSwitcher() {
|
|
const locale = useLocale() as Locale;
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
const t = useTranslations('language');
|
|
|
|
const switchLocale = (newLocale: Locale) => {
|
|
router.replace(pathname, { locale: newLocale });
|
|
};
|
|
|
|
const nextLocale: Locale = locale === 'vi' ? 'en' : 'vi';
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={() => switchLocale(nextLocale)}
|
|
className="inline-flex h-9 items-center gap-1.5 rounded-md px-2.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
|
|
aria-label={`${t('label')}: ${t(locale)} → ${t(nextLocale)}`}
|
|
>
|
|
<span aria-hidden="true">{localeLabels[nextLocale]}</span>
|
|
<span className="sr-only">{t(nextLocale)}</span>
|
|
</button>
|
|
);
|
|
}
|