45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import { getLocaleFromPath, getLocalizedPath, t, type Locale } from '@/lib/i18n';
|
|
|
|
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}
|
|
className={`px-4 py-2 text-sm font-medium rounded-md transition-all ${
|
|
isActive
|
|
? 'bg-blue-600 text-white shadow-sm'
|
|
: 'text-gray-700 hover:bg-gray-50 hover:text-gray-900'
|
|
}`}
|
|
aria-label={`Switch to ${label}`}
|
|
locale={locale}
|
|
>
|
|
<span className="inline-flex items-center gap-2">
|
|
<span className="text-base">{flag}</span>
|
|
<span>{label}</span>
|
|
</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
} |