forked from
pds.ls/pdsls
atmosphere explorer
some unicorn barfed all over the record view
+16
-7
+16
-7
src/components/json.tsx
+16
-7
src/components/json.tsx
···
80
80
81
81
return (
82
82
<span>
83
-
"
83
+
<span class="text-neutral-500 dark:text-neutral-400">"</span>
84
84
<For each={displayData().split(/(\s)/)}>
85
85
{(part) => (
86
86
<>
···
125
125
<Show when={isTruncated()}>
126
126
<span>…</span>
127
127
</Show>
128
-
"
128
+
<span class="text-neutral-500 dark:text-neutral-400">"</span>
129
129
<Show when={isTruncated()}>
130
130
<span class="ml-1 text-neutral-500 dark:text-neutral-400">
131
131
(+{remainingChars().toLocaleString()})
···
153
153
isType?: boolean;
154
154
isLink?: boolean;
155
155
isSize?: boolean;
156
+
isIndex?: boolean;
156
157
parentIsBlob?: boolean;
157
158
}) => {
158
159
const ctx = useJSONCtx();
···
186
187
}}
187
188
>
188
189
<button
189
-
class="group/clip relative flex size-fit shrink-0 items-center gap-x-1 wrap-anywhere text-neutral-500 hover:text-neutral-700 active:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-300 dark:active:text-neutral-300"
190
+
class="group/clip relative flex size-fit shrink-0 items-center gap-x-1 wrap-anywhere"
190
191
classList={{
191
192
"max-w-[40%] sm:max-w-[50%]": props.maxWidth !== undefined,
193
+
"text-indigo-500 hover:text-indigo-700 active:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 dark:active:text-indigo-200":
194
+
!props.isIndex,
195
+
"text-violet-500 hover:text-violet-700 active:text-violet-800 dark:text-violet-400 dark:hover:text-violet-300 dark:active:text-violet-200":
196
+
props.isIndex,
192
197
}}
193
198
onclick={() => isCollapsible() && setShow(!show())}
194
199
>
···
204
209
: <span class="iconify lucide--chevron-right"></span>}
205
210
</span>
206
211
</Show>
207
-
{props.label}:
212
+
<span>
213
+
{props.label}
214
+
<span class="text-neutral-500 dark:text-neutral-400">:</span>
215
+
</span>
208
216
<Show when={!show() && summary()}>
209
217
<span class="text-neutral-400 dark:text-neutral-500">{summary()}</span>
210
218
</Show>
···
368
376
return <span class="text-neutral-400 dark:text-neutral-500">[ ]</span>;
369
377
return (
370
378
<For each={props.data}>
371
-
{(value, index) => <CollapsibleItem label={`#${index()}`} value={value} />}
379
+
{(value, index) => <CollapsibleItem label={`#${index()}`} value={value} isIndex />}
372
380
</For>
373
381
);
374
382
};
···
383
391
if (typeof data === "string")
384
392
return <JSONString data={data} isType={props.isType} isLink={props.isLink} />;
385
393
if (typeof data === "number") return <JSONNumber data={data} isSize={props.isSize} />;
386
-
if (typeof data === "boolean") return <span>{String(data)}</span>;
387
-
if (data === null) return <span>null</span>;
394
+
if (typeof data === "boolean")
395
+
return <span class="text-amber-500 dark:text-amber-400">{String(data)}</span>;
396
+
if (data === null) return <span class="text-neutral-400 dark:text-neutral-500">null</span>;
388
397
if (Array.isArray(data)) return <JSONArray data={data} />;
389
398
return <JSONObject data={data} />;
390
399
};