gram: legal

> ./assets/react-components/peruse.jsx

import React, { useState, useEffect } from "react";
import { Space } from "./space"
import { Page } from "./page"
import { Boundary } from "./boundary"
import { Examine } from "./examine"
import { dump } from "js-yaml"

export function Peruse({body}) {
  let parsed = JSON.parse(body)
  let [mode, setMode] = useState("human")
  let modes = ["human", "json", "yaml"]

  return <>
    <div>
      {modes.map(m => <button
        className={mode === m ? "engaged" : "disengaged"}
        onClick={() => setMode(m)}>{m}</button>
      )}
    </div>
    <Space/>

    <Boundary fallback={<p>Oh no!</p>}>
      {(mode == "json") ?
        <Examine src={parsed} />

      : mode == "yaml" ?
        <pre><code>
        {dump(parsed, {flowLevel: 300, lineWidth: -1})}
        </code></pre>

      : mode == "human" ?
      <div><Page src={parsed}/></div>

      : <div>Unsure!</div>
      }
    </Boundary>
  </>
}