95 lines
3.3 KiB
TypeScript
95 lines
3.3 KiB
TypeScript
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.schema).map(([templateKey, template]) => (
|
|
<li key={templateKey}>
|
|
<p className="font-bold">{templateKey}</p>
|
|
<p className="font-thin text-xs">{template.type}</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>
|
|
</>
|
|
);
|
|
};
|