feat(web): add i18n locale routes and language switcher component
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>
This commit is contained in:
35
apps/web/components/ui/language-switcher.tsx
Normal file
35
apps/web/components/ui/language-switcher.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user