34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { SwitchRoot, SwitchControl, SwitchThumb, SwitchLabel } from "@seed-design/react";
|
|
import { isHidden, setHidden } from "./money";
|
|
|
|
/** Dispatched on `window` whenever the global hide-amounts flag changes, so
|
|
* pages that render amounts elsewhere (not through this switch) can re-render. */
|
|
export const HIDE_AMOUNTS_EVENT = "mercury:hideamounts";
|
|
|
|
export interface HideAmountsToggleProps {
|
|
label?: string;
|
|
}
|
|
|
|
export function HideAmountsToggle({ label = "Мөнгөн дүн нуух" }: HideAmountsToggleProps) {
|
|
const [checked, setChecked] = useState<boolean>(() => isHidden());
|
|
|
|
function handleChange(next: boolean) {
|
|
setHidden(next);
|
|
setChecked(next);
|
|
if (typeof window !== "undefined") {
|
|
window.dispatchEvent(new CustomEvent(HIDE_AMOUNTS_EVENT, { detail: { hidden: next } }));
|
|
}
|
|
}
|
|
|
|
return (
|
|
<SwitchRoot checked={checked} onCheckedChange={handleChange}>
|
|
<SwitchControl>
|
|
<SwitchThumb />
|
|
</SwitchControl>
|
|
<SwitchLabel>{label}</SwitchLabel>
|
|
</SwitchRoot>
|
|
);
|
|
}
|