forked from
pds.ls/pdsls
atmosphere explorer
show filesize next to size value
+25
-11
+25
-11
src/components/json.tsx
+25
-11
src/components/json.tsx
···
143
143
);
144
144
};
145
145
146
-
const JSONNumber = ({ data }: { data: number }) => {
147
-
return <span>{data}</span>;
146
+
const JSONNumber = ({ data, isSize }: { data: number; isSize?: boolean }) => {
147
+
return (
148
+
<span class="flex gap-1">
149
+
{data}
150
+
<Show when={isSize}>
151
+
<span class="text-neutral-500 dark:text-neutral-400">({formatFileSize(data)})</span>
152
+
</Show>
153
+
</span>
154
+
);
148
155
};
149
156
150
157
const JSONBoolean = ({ data }: { data: boolean }) => {
···
161
168
maxWidth?: string;
162
169
isType?: boolean;
163
170
isLink?: boolean;
171
+
isSize?: boolean;
164
172
parentIsBlob?: boolean;
165
173
}) => {
166
174
const ctx = useJSONCtx();
···
202
210
}}
203
211
>
204
212
<JSONCtx.Provider value={{ ...ctx, parentIsBlob: isBlobContext }}>
205
-
<JSONValueInner data={props.value} isType={props.isType} isLink={props.isLink} />
213
+
<JSONValueInner
214
+
data={props.value}
215
+
isType={props.isType}
216
+
isLink={props.isLink}
217
+
isSize={props.isSize}
218
+
/>
206
219
</JSONCtx.Provider>
207
220
</span>
208
221
</span>
···
243
256
maxWidth="set"
244
257
isType={key === "$type"}
245
258
isLink={key === "$link"}
259
+
isSize={key === "size" && isBlob}
246
260
parentIsBlob={isBlobContext}
247
261
/>
248
262
)}
···
254
268
pds() && params.rkey && (blob.mimeType.startsWith("image/") || blob.mimeType === "video/mp4");
255
269
256
270
const MediaDisplay = () => (
257
-
<div class="flex flex-col gap-1">
271
+
<div>
258
272
<span class="group/media relative flex w-fit">
259
273
<Show when={!hide()}>
260
274
<Show when={blob.mimeType.startsWith("image/")}>
···
292
306
</button>
293
307
</Show>
294
308
</span>
295
-
<Show when={blob.size}>
296
-
<span class="text-xs text-neutral-400 dark:text-neutral-500">
297
-
{formatFileSize(blob.size)}
298
-
</span>
299
-
</Show>
300
309
</div>
301
310
);
302
311
···
322
331
);
323
332
};
324
333
325
-
const JSONValueInner = (props: { data: JSONType; isType?: boolean; isLink?: boolean }) => {
334
+
const JSONValueInner = (props: {
335
+
data: JSONType;
336
+
isType?: boolean;
337
+
isLink?: boolean;
338
+
isSize?: boolean;
339
+
}) => {
326
340
const data = props.data;
327
341
if (typeof data === "string")
328
342
return <JSONString data={data} isType={props.isType} isLink={props.isLink} />;
329
-
if (typeof data === "number") return <JSONNumber data={data} />;
343
+
if (typeof data === "number") return <JSONNumber data={data} isSize={props.isSize} />;
330
344
if (typeof data === "boolean") return <JSONBoolean data={data} />;
331
345
if (data === null) return <JSONNull />;
332
346
if (Array.isArray(data)) return <JSONArray data={data} />;