84 lines
2.3 KiB
TypeScript
84 lines
2.3 KiB
TypeScript
"use client";
|
|
import { useState } from "react";
|
|
import { Settings2 } from "lucide-react";
|
|
import { useI18n } from "./I18nProvider";
|
|
import { useSiteSettings } from "./SiteSettingsProvider";
|
|
import { api } from "@/lib/client-api";
|
|
import type { SiteSettings } from "@/shared/site-settings";
|
|
|
|
export function ModeratorSettings() {
|
|
const { t } = useI18n();
|
|
const { settings, updateSettings } = useSiteSettings();
|
|
const [busy, setBusy] = useState(false);
|
|
const [error, setError] = useState("");
|
|
const [saved, setSaved] = useState(false);
|
|
async function toggle() {
|
|
setBusy(true);
|
|
setError("");
|
|
setSaved(false);
|
|
try {
|
|
const next = await api<SiteSettings>(
|
|
"moderation/settings",
|
|
{
|
|
betaBadgeEnabled: !settings.betaBadgeEnabled,
|
|
},
|
|
"PATCH",
|
|
);
|
|
updateSettings(next);
|
|
setSaved(true);
|
|
} catch (e) {
|
|
setError((e as Error).message);
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
}
|
|
return (
|
|
<section
|
|
className="tool-card moderator-settings"
|
|
aria-labelledby="site-settings-heading"
|
|
>
|
|
<div className="settings-heading">
|
|
<Settings2 size={24} aria-hidden="true" />
|
|
<div>
|
|
<h2 id="site-settings-heading">{t("Site settings")}</h2>
|
|
<p>
|
|
{t(
|
|
"Changes apply to every player. Only admins can edit these settings.",
|
|
)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="moderator-setting-row">
|
|
<div>
|
|
<h3>{t("Beta badge")}</h3>
|
|
<p className="muted">
|
|
{t("Show BETA next to the MineGeo logo throughout the site.")}
|
|
</p>
|
|
<p className="muted">
|
|
{settings.betaBadgeEnabled
|
|
? t("Visible to all players")
|
|
: t("Hidden for all players")}
|
|
</p>
|
|
</div>
|
|
<button className="button" disabled={busy} onClick={toggle}>
|
|
{busy
|
|
? t("Saving…")
|
|
: settings.betaBadgeEnabled
|
|
? t("Hide beta badge")
|
|
: t("Show beta badge")}
|
|
</button>
|
|
</div>
|
|
{error && (
|
|
<p role="alert" className="error-message">
|
|
{t(error)}
|
|
</p>
|
|
)}
|
|
{saved && (
|
|
<p role="status" className="muted">
|
|
{t("Setting saved. Open pages update within 30 seconds.")}
|
|
</p>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|