| 5 | import { Modal } from "./modal"; |
| 6 | |
| 7 | export const JsonViewer = ({ data, label }: { data: any; label: string }) => { |
| 8 | const [modalVisible, setModalVisible] = React.useState(false); |
| 9 | |
| 10 | return ( |
| 11 | <div className={clsx("re-relative")}> |
| 12 | <JsonView |
| 13 | data={data} |
| 14 | shouldExpandNode={(l) => l < 2} |
| 15 | style={{ |
| 16 | ...darkStyles, |
| 17 | container: clsx( |
| 18 | "re-bg-[#303450]", |
| 19 | "re-font-mono re-text-xs", |
| 20 | "[&>*:first-child]:!re-px-[12px]", |
| 21 | "re-py-1", |
| 22 | "re-overflow-auto", |
| 23 | "re-max-h-[160px]", |
| 24 | "re-rounded-lg", |
| 25 | ), |
| 26 | basicChildStyle: clsx( |
| 27 | "re-py-[3px]", |
| 28 | "re-pr-[5px]", |
| 29 | "re-pl-[20px]", |
| 30 | "re-leading-5", |
| 31 | ), |
| 32 | collapsedContent: clsx( |
| 33 | "re-text-amber-500", |
| 34 | "after:re-content-['...']", |
| 35 | "after:re-pr-[5px]", |
| 36 | ), |
| 37 | label: clsx("re-mr-[8px]", "re-text-neutral-200"), |
| 38 | stringValue: clsx("re-text-amber-500"), |
| 39 | numberValue: clsx("re-text-amber-500"), |
| 40 | undefinedValue: clsx("re-text-neutral-500"), |
| 41 | nullValue: clsx("re-text-neutral-500"), |
| 42 | expandIcon: clsx( |
| 43 | "after:re-transition-transform", |
| 44 | "after:re-duration-200", |
| 45 | "after:re-ease-in-out", |
| 46 | "after:re-content-['⏵']", |
| 47 | "after:re-mr-[8px]", |
| 48 | "after:re-inline-block", |
| 49 | ), |
| 50 | collapseIcon: clsx( |
| 51 | "after:re-transition-transform", |
| 52 | "after:re-duration-200", |
| 53 | "after:re-ease-in-out", |
| 54 | "after:re-content-['⏵']", |
| 55 | "after:re-mr-[8px]", |
| 56 | "after:re-inline-block", |
| 57 | "after:re-rotate-90", |
| 58 | ), |
| 59 | }} |
| 60 | /> |
| 61 | <button |
| 62 | type="button" |
| 63 | onClick={(event) => { |
| 64 | event.preventDefault(); |