90 lines
3.3 KiB
TypeScript
90 lines
3.3 KiB
TypeScript
'use client';
|
|
|
|
import { TransitionLink } from '@/components/ui/TransitionLink';
|
|
import { usePathname } from 'next/navigation';
|
|
import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
|
|
|
|
interface LanguageSwitcherProps {
|
|
mobile?: boolean;
|
|
isSolidMode?: boolean;
|
|
}
|
|
|
|
export function LanguageSwitcher({ mobile = false, isSolidMode = false }: LanguageSwitcherProps) {
|
|
const pathname = usePathname() || '/';
|
|
const currentLocale = pathname.startsWith('/en') ? 'en' : 'de';
|
|
|
|
const getSwitchedUrl = (newLocale: string) => {
|
|
const pathWithoutLocale = pathname.replace(/^\/(en|de)/, '');
|
|
return `/${newLocale}${pathWithoutLocale === '' ? '' : pathWithoutLocale}`;
|
|
};
|
|
|
|
const locales = [
|
|
{ code: 'de', label: 'DE', fullLabel: 'Deutsch', flag: '🇩🇪' },
|
|
{ code: 'en', label: 'EN', fullLabel: 'English', flag: '🇬🇧' },
|
|
] as const;
|
|
|
|
if (mobile) {
|
|
return (
|
|
<div className="flex flex-col gap-3">
|
|
{locales.map((loc) => (
|
|
<TransitionLink
|
|
key={loc.code}
|
|
href={getSwitchedUrl(loc.code)}
|
|
className={`group relative overflow-hidden flex items-center gap-3 px-5 py-3 rounded-xl text-lg font-semibold transition-all duration-300 ${
|
|
currentLocale === loc.code
|
|
? 'bg-primary/10 text-primary border border-primary/20'
|
|
: 'text-text-secondary hover:bg-neutral-50 border border-transparent'
|
|
}`}
|
|
>
|
|
<HoverShineOverlay shineColor="via-primary/5" />
|
|
|
|
<span className="relative z-10 text-2xl" aria-hidden="true">{loc.flag}</span>
|
|
<span className="relative z-10">{loc.fullLabel}</span>
|
|
{currentLocale === loc.code && (
|
|
<svg className="relative z-10 w-5 h-5 ml-auto text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
|
|
<polyline points="20 6 9 17 4 12" />
|
|
</svg>
|
|
)}
|
|
</TransitionLink>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Desktop styles dependent on isSolidMode
|
|
const containerClass = isSolidMode
|
|
? 'bg-neutral-100 border-neutral-200'
|
|
: 'bg-white/10 backdrop-blur-sm border-white/10';
|
|
|
|
return (
|
|
<div className={`group relative overflow-hidden flex items-center rounded-full p-0.5 border ${containerClass} transition-colors duration-300`}>
|
|
<HoverShineOverlay shineColor={isSolidMode ? "via-primary/10" : "via-white/20"} />
|
|
|
|
{locales.map((loc) => {
|
|
const isActive = currentLocale === loc.code;
|
|
|
|
let linkClass = '';
|
|
if (isActive) {
|
|
linkClass = 'bg-white text-primary shadow-sm';
|
|
} else {
|
|
linkClass = isSolidMode
|
|
? 'text-text-secondary hover:text-primary'
|
|
: 'text-white/70 hover:text-white';
|
|
}
|
|
|
|
return (
|
|
<TransitionLink
|
|
key={loc.code}
|
|
href={getSwitchedUrl(loc.code)}
|
|
className={`relative z-10 flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider transition-all duration-300 ${linkClass}`}
|
|
aria-label={`Switch to ${loc.fullLabel}`}
|
|
>
|
|
<span className="text-sm" aria-hidden="true">{loc.flag}</span>
|
|
<span>{loc.label}</span>
|
|
</TransitionLink>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|