333c9c40af
- Introduced `LocaleSwitcher` component for language selection with support for locale-aware dropdown and ARIA accessibility. - Updated layouts (`Header`, `Breadcrumbs`, `Home`) to include the new locale switcher. - Expanded localization files (`en.json`, `it.json`) with new keys for language switching. - Adjusted i18n configuration to enhance routing and message imports. - Updated Jest module mappings to mock new i18n components and utilities.
77 lines
2.3 KiB
TypeScript
77 lines
2.3 KiB
TypeScript
/**
|
|
* LocaleSwitcher Component
|
|
*
|
|
* Allows users to switch between available locales (EN, IT).
|
|
* Maintains the current pathname when switching languages.
|
|
*
|
|
* Features:
|
|
* - Dropdown menu with available locales
|
|
* - Shows current locale with visual indicator
|
|
* - Preserves pathname when switching
|
|
* - Accessible with proper ARIA labels
|
|
* - Translated labels using next-intl
|
|
*/
|
|
|
|
'use client';
|
|
|
|
import { useLocale, useTranslations } from 'next-intl';
|
|
import { usePathname, useRouter, type Locale } from '@/lib/i18n/routing';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui/dropdown-menu';
|
|
import { Check, Languages } from 'lucide-react';
|
|
import { routing } from '@/lib/i18n/routing';
|
|
import { useTransition } from 'react';
|
|
|
|
export function LocaleSwitcher() {
|
|
const t = useTranslations('locale');
|
|
const locale = useLocale();
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
const [isPending, startTransition] = useTransition();
|
|
|
|
const handleLocaleChange = (newLocale: Locale) => {
|
|
startTransition(() => {
|
|
// Navigate to the same pathname with the new locale
|
|
router.replace(pathname, { locale: newLocale });
|
|
});
|
|
};
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="gap-2"
|
|
disabled={isPending}
|
|
aria-label={t('switchLanguage')}
|
|
>
|
|
<Languages className="h-4 w-4" aria-hidden="true" />
|
|
<span className="uppercase text-xs font-semibold">{locale}</span>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
{routing.locales.map((loc) => (
|
|
<DropdownMenuItem
|
|
key={loc}
|
|
onClick={() => handleLocaleChange(loc)}
|
|
className="cursor-pointer gap-2"
|
|
>
|
|
<Check
|
|
className={`h-4 w-4 ${locale === loc ? 'opacity-100' : 'opacity-0'}`}
|
|
aria-hidden="true"
|
|
/>
|
|
<span>{t(loc)}</span>
|
|
<span className="ml-auto text-xs text-muted-foreground uppercase">{loc}</span>
|
|
</DropdownMenuItem>
|
|
))}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|