TTikotok V4

greenlns-landing/components/LanguageSwitcher.tsx

@@ -0,0 +1,50 @@
+'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>
+  )
+}