51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
'use client'
|
|
|
|
import { usePathname } from 'next/navigation'
|
|
import { useLang } from '@/context/LangContext'
|
|
import type { Lang } from '@/lib/i18n'
|
|
import { getAlternatePath, getLocaleForPath } from '@/lib/localeRoutes'
|
|
|
|
const LANGS: Lang[] = ['de', 'en', 'es']
|
|
|
|
interface LanguageSwitcherProps {
|
|
/** 'landing' für die helle Pille auf der Landing-Navbar, 'seo' für die Subpage-Navbar. */
|
|
variant?: 'landing' | 'seo'
|
|
}
|
|
|
|
export default function LanguageSwitcher({ variant = 'landing' }: LanguageSwitcherProps) {
|
|
const pathname = usePathname() ?? '/'
|
|
const { setLang } = useLang()
|
|
const active = getLocaleForPath(pathname)
|
|
|
|
const baseClass =
|
|
variant === 'seo'
|
|
? 'flex items-center bg-ink-soft rounded-full px-1 py-1 text-[10px] font-bold tracking-widest'
|
|
: 'flex items-center gap-0.5 rounded-full p-[3px] bg-white/5 border border-white/10 text-[10px] font-bold tracking-widest'
|
|
|
|
const activeClass =
|
|
variant === 'seo'
|
|
? 'bg-[#4a5c4e] text-white rounded-full px-3 py-1 block'
|
|
: 'bg-white/15 text-white rounded-full px-3 py-1 block'
|
|
|
|
const idleClass = 'text-white/50 hover:text-white px-3 py-1 transition-colors block'
|
|
|
|
return (
|
|
<div className={baseClass} role="group" aria-label="Language selector">
|
|
{LANGS.map((code) => {
|
|
const isActive = active === code
|
|
return (
|
|
<a
|
|
key={code}
|
|
href={getAlternatePath(pathname, code)}
|
|
className={isActive ? activeClass : idleClass}
|
|
aria-current={isActive ? 'true' : undefined}
|
|
onClick={() => setLang(code)}
|
|
>
|
|
{code.toUpperCase()}
|
|
</a>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|