Math Block

1"use client";
2 
3import * as React from "react";
4import "./math.css";
5 
6/**
7 * A display equation with a plain-English restatement under it and a
8 * progressive-disclosure button for the derivation.
9 *
10 * `children` is the rendered equation — typically KaTeX or MathML output.
11 * katex is not imported here; render the math however you like.
12 */
13export interface MathBlockProps {
14  children: React.ReactNode;
15  plain: string;
16  derivation?: React.ReactNode;
17}
18 
19export function MathBlock({ children, plain, derivation }: MathBlockProps) {
20  const [open, setOpen] = React.useState(false);
21  const id = React.useId();
22  return (
23    <div className="moco-math-block">
24      {derivation ? (
25        <div className="moco-math-head">
26          <button
27            type="button"
28            className="moco-btn-sm"
29            aria-expanded={open}
30            aria-controls={id}
31            onClick={() => setOpen((v) => !v)}
32          >
33            {open ? "Hide the math" : "Show the math"}
34          </button>
35        </div>
36      ) : null}
37      {children}
38      <p className="moco-math-plain">{plain}</p>
39      {derivation ? (
40        <div id={id} className="moco-math-deriv" hidden={!open}>
41          {derivation}
42        </div>
43      ) : null}
44    </div>
45  );
46}