29 lines
1.5 KiB
TypeScript
29 lines
1.5 KiB
TypeScript
import { useTranslation } from "react-i18next";
|
|
|
|
// Read-only summary of the currently active language. The global language
|
|
// menu owns the mutation so this settings card cannot drift from that source.
|
|
export function LanguageSettingsNotice() {
|
|
const { t, i18n } = useTranslation();
|
|
const activeLanguage = i18n.language.split("-")[0] ?? "de";
|
|
|
|
return (
|
|
<section
|
|
data-ui-id="ui.settings.language.notice"
|
|
aria-labelledby="settings-language-heading"
|
|
className="flex w-full flex-col gap-4 rounded-md border border-solid border-border-default bg-surface-neutral-secondary px-4 py-4"
|
|
>
|
|
<div className="space-y-1">
|
|
<h2 id="settings-language-heading" className="text-body-default-semibold-0 font-body-default-semibold-0 text-text-neutral-primary">
|
|
{t("settings.language.heading")}
|
|
</h2>
|
|
<p className="text-body-small-regular-0 font-body-small-regular-0 text-text-neutral-secondary">{t("settings.language.description")}</p>
|
|
</div>
|
|
<dl className="grid gap-1 text-body-small-regular-0 font-body-small-regular-0">
|
|
<dt className="text-text-neutral-secondary">{t("settings.language.currentLabel")}</dt>
|
|
<dd className="text-text-neutral-primary">{t(`shared.locales.${activeLanguage}`)}</dd>
|
|
</dl>
|
|
<p className="rounded-sm border border-dashed border-border-default bg-surface-neutral-primary px-3 py-2 text-body-small-regular-0 font-body-small-regular-0 text-text-neutral-secondary">{t("settings.language.v2Note")}</p>
|
|
</section>
|
|
);
|
|
}
|