48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import { getLocaleFromPath, getLocalizedPath, type Locale } from '@/lib/i18n';
|
|
import { Button } from '@/components/ui';
|
|
|
|
export function LocaleSwitcher() {
|
|
const pathname = usePathname();
|
|
const currentLocale = getLocaleFromPath(pathname);
|
|
|
|
const locales: Locale[] = ['en', 'de'];
|
|
|
|
return (
|
|
<div className="inline-flex items-center gap-2 bg-white rounded-lg border border-gray-200 p-1 shadow-sm">
|
|
{locales.map((locale) => {
|
|
const isActive = currentLocale === locale;
|
|
const label = locale === 'en' ? 'English' : 'Deutsch';
|
|
const flag = locale === 'en' ? '🇺🇸' : '🇩🇪';
|
|
|
|
// Get the current path without locale
|
|
const currentPath = pathname.replace(/^\/(de|en)/, '') || '/';
|
|
const href = getLocalizedPath(currentPath, locale);
|
|
|
|
return (
|
|
<Link
|
|
key={locale}
|
|
href={href}
|
|
locale={locale}
|
|
passHref
|
|
>
|
|
<Button
|
|
variant={isActive ? 'primary' : 'ghost'}
|
|
size="sm"
|
|
className={`transition-all ${isActive ? 'shadow-sm' : ''}`}
|
|
aria-label={`Switch to ${label}`}
|
|
>
|
|
<span className="inline-flex items-center gap-2">
|
|
<span className="text-base">{flag}</span>
|
|
<span className="font-medium">{label}</span>
|
|
</span>
|
|
</Button>
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
} |