Weather Station / ECOWITT / DNT
1"use client";
2
3import React from "react";
4import { useTranslation } from "react-i18next";
5
6/**
7 * A component that allows the user to switch between supported languages (DE and EN).
8 * It highlights the currently active language and handles the language change logic.
9 *
10 * @returns A React component with language switching buttons.
11 */
12export default function LanguageSwitcher() {
13 const { i18n } = useTranslation();
14 const cur = i18n.language || "de";
15 const setLang = (lng: string) => {
16 if (lng !== cur) i18n.changeLanguage(lng);
17 };
18 const btn = (lng: string, label: string) => (
19 <button
20 key={lng}
21 onClick={() => setLang(lng)}
22 className={`px-2 py-1 text-xs rounded border ${cur === lng ? "bg-white dark:bg-neutral-900 border-gray-300 dark:border-neutral-700" : "border-transparent text-gray-600 hover:text-gray-900"}`}
23 aria-pressed={cur === lng}
24 >
25 {label}
26 </button>
27 );
28 return (
29 <div className="ml-auto flex items-center gap-1" role="group" aria-label="Language Switcher">
30 {btn("de", "DE")}
31 {btn("en", "EN")}
32 </div>
33 );
34}