tynanpurdy.com
Fork of atp.tools as a universal profile for people on the ATmosphere
1import { Link } from "@tanstack/react-router";
2import { getComponent } from "./json/getComponent";
3
4// lazy dumb component. redo this ASAP
5export function RenderJson(props: {
6 data: any;
7 depth?: number;
8 did: string;
9 pds: string;
10}) {
11 if (props.data === null) return null;
12 if (!props.depth) {
13 props.depth = 0;
14 }
15 // if data is not an object just render it
16 if (typeof props.data !== "object") {
17 if (typeof props.data === "string") {
18 if (props.data.startsWith("at://")) {
19 // have to do this b/c Link type safety.
20 // there's only a set num of things it can be anyways
21 let parts = props.data.replace("at://", "").split("/");
22 switch (parts.length) {
23 case 1:
24 return (
25 <Link
26 className="text-blue-700 dark:text-blue-400"
27 to={"/at:/$handle"}
28 params={{
29 handle: parts[0],
30 }}
31 >
32 {props.data}
33 </Link>
34 );
35 case 2:
36 return (
37 <Link
38 className="text-blue-700 dark:text-blue-400"
39 to={"/at:/$handle/$collection"}
40 params={{
41 handle: parts[0],
42 collection: parts[1],
43 }}
44 >
45 {props.data}
46 </Link>
47 );
48 case 3:
49 return (
50 <Link
51 className="text-blue-700 dark:text-blue-400"
52 to={"/at:/$handle/$collection/$rkey"}
53 params={{
54 handle: parts[0],
55 collection: parts[1],
56 rkey: parts[2],
57 }}
58 >
59 {props.data}
60 </Link>
61 );
62 }
63 } else if (props.data.startsWith("did:")) {
64 return (
65 <Link
66 className="text-blue-700 dark:text-blue-400"
67 to={"/at:/$handle"}
68 params={{
69 handle: props.data,
70 }}
71 >
72 {props.data}
73 </Link>
74 );
75 }
76 }
77
78 return <span>{props.data}</span>;
79 }
80 // if the data is an object we have a custom component for, use that instead
81 if (props.data.$type) {
82 const Component = getComponent(props.data?.$type);
83 if (Component) {
84 console.log("props.data", props.data);
85 return (
86 <div style={{ marginLeft: `${20}px` }}>
87 <span className="text-muted-foreground">{props.data.$type}</span>:{" "}
88 <Component
89 did={props.did}
90 dollar_link={props.data?.ref?.$link || undefined}
91 author_pds={props.pds}
92 {...props.data}
93 />
94 </div>
95 );
96 }
97 }
98 return (
99 <>
100 {Object.keys(props.data).map((k) => {
101 return (
102 <div style={{ marginLeft: `${20}px` }}>
103 <span className="text-muted-foreground">{k}</span>:{" "}
104 <RenderJson
105 data={props.data[k]}
106 depth={(props.depth ?? 0) + 1}
107 did={props.did}
108 pds={props.pds}
109 />
110 </div>
111 );
112 })}
113 </>
114 );
115}