Collapsible JSON tree viewer

'use client';
import { useState } from 'react';

export type Json = string | number | boolean | null | Json[] | { [key: string]: Json };

const scalarColour = (v: Json) =>
  typeof v === 'string' ? 'text-emerald-600'
  : typeof v === 'number' ? 'text-sky-600'
  : typeof v === 'boolean' ? 'text-violet-600'
  : 'text-slate-400';

function Node({ name, value, depth, openDepth }: { name?: string; value: Json; depth: number; openDepth: number }) {
  const isBranch = value !== null && typeof value === 'object';
  const [open, setOpen] = useState(depth < openDepth);
  const label = name !== undefined && <span className="text-slate-700">{name}: </span>;

  if (!isBranch) {
    return (
      <li className="font-mono text-sm leading-6">
        {label}
        <span className={scalarColour(value)}>{JSON.stringify(value)}</span>
      </li>
    );
  }

  const entries = Object.entries(value as object) as [string, Json][];
  const isArray = Array.isArray(value);
  const [openBr, closeBr] = isArray ? ['[', ']'] : ['{', '}'];

  return (
    <li className="font-mono text-sm leading-6">
      <button
        type="button"
        aria-expanded={open}
        onClick={() => setOpen((o) => !o)}
        className="text-left hover:text-slate-950"
      >
        <span className="mr-1 inline-block w-3 text-slate-400">{open ? '▾' : '▸'}</span>
        {label}
        <span className="text-slate-500">
          {openBr}
          {open ? '' : `${entries.length}${closeBr}`}
        </span>
      </button>
      {open && (
        <>
          <ul className="ml-4 border-l border-slate-200 pl-3">
            {entries.map(([k, v]) => (
              <Node key={k} name={k} value={v} depth={depth + 1} openDepth={openDepth} />
            ))}
          </ul>
          <span className="ml-4 text-slate-500">{closeBr}</span>
        </>
      )}
    </li>
  );
}

export function JsonTree({ data, openDepth = 1 }: { data: Json; openDepth?: number }) {
  return (
    <ul className="rounded-lg bg-slate-50 p-3">
      <Node value={data} depth={0} openDepth={openDepth} />
    </ul>
  );
}