tabletop-commander/components/schema/schema-viewer.tsx

import { FC, useCallback } from "react";
import { Truncate } from "@/components/Poppables/truncation";
import { Accordion, AccordionContent } from "../../lib/accordion";
import { FieldTypes, fieldTypesWithValues } from "./fieldtypes";

interface IProps {
  schema: Schema;
  onTypeClick?: (arg: string, arg1: TypeType) => void;
}

export const SchemaViewer: FC<IProps> = ({ schema, onTypeClick }) => {
  const createValueLable = useCallback((field: FieldType) => {
    if (field.isConstant) {
      if (field.type === FieldTypes.dice) return "Auto-rolled";
      return "Constant value:";
    }
    switch (field.type) {
      case FieldTypes.type:
        return "Type:";
      case FieldTypes.dice:
        return "Dice:";
      case FieldTypes.select:
        return "Options:";
      default:
        return "";
    }
  }, []);

  return (
    <>
      {/* <div className="whitespace-pre-wrap">{JSON.stringify(schema, null, 2)}</div> */}
      <div>
        <p className="font-bold text-lg">{schema.name}</p>
        <hr />
        <p className="font-bold italic">Templates</p>
        <ul>
          {Object.entries(schema.fields).map(([templateKey, template]) => (
            <li key={templateKey}>
              <p className="font-bold">{templateKey}</p>
              <p className="text-mixed-600 ml-2">Type: {template}</p>
            </li>
          ))}
        </ul>
        <hr />
        <p className="font-bold italic">Types</p>
        <ul className="rounded-lg overflow-hidden grid">
          {Object.entries(schema.types).map(([typeKey, type]) => (
            <li
              key={"type viewer" + typeKey}
              // onClick={() => onTypeClick && onTypeClick(typeKey, type)}
              data-clickable={!!onTypeClick}
              className="odd:bg-black/50 p-2 group overflow-hidden"
            >
              <Accordion
                title={
                  <p className="group-data-[expanded]/controlled:mb-2 transition-all font-bold">
                    {typeKey}
                  </p>
                }
              >
                <AccordionContent>
                  <div className="grid grid-cols-2 gap-2">
                    {Object.entries(type).map(([fieldKey, field]) => (
                      <div
                        key={"field viewer" + fieldKey}
                        className="rounded-lg border border-olive-drab p-2"
                      >
                        <p className="font-bold">{fieldKey}</p>
                        <p className="font-thin capitalize text-xs">
                          {field.type}
                        </p>
                        <p className="font-thin capitalize text-xs">
                          Maximum entries:{" "}
                          {field.limit === 0 ? "unlimited " : field.limit}
                        </p>
                        {(field.isConstant ||
                          fieldTypesWithValues.includes(field.type)) && (
                          <p className="font-thin capitalize text-xs">
                            {createValueLable(field)}{" "}
                            <Truncate>{field.value}</Truncate>
                          </p>
                        )}
                      </div>
                    ))}
                  </div>
                </AccordionContent>
              </Accordion>
            </li>
          ))}
        </ul>
      </div>
    </>
  );
};