olaren.dev
forked from
pds.ls/pdsls
atmosphere explorer
change max image size
handle.invalid
+2
-2
src/components/json.tsx
+2
-2
src/components/json.tsx
···
199
<Show when={!hide()}>
200
<Show when={blob.mimeType.startsWith("image/")}>
201
<img
202
-
class="h-auto max-h-64 max-w-[16rem] object-contain"
203
src={`https://${pds()}/xrpc/com.atproto.sync.getBlob?did=${props.repo}&cid=${blob.ref.$link}`}
204
onLoad={() => setMediaLoaded(true)}
205
/>
···
216
<Show when={mediaLoaded()}>
217
<button
218
onclick={() => setHide(true)}
219
-
class="absolute top-1 right-1 flex items-center rounded-lg bg-neutral-900/70 p-1.5 text-white opacity-100 backdrop-blur-sm transition-opacity hover:bg-neutral-900/80 active:bg-neutral-900/90 sm:opacity-0 sm:group-hover/media:opacity-100 dark:bg-neutral-100/70 dark:text-neutral-900 dark:hover:bg-neutral-100/80 dark:active:bg-neutral-100/90"
220
>
221
<span class="iconify lucide--eye-off text-base"></span>
222
</button>
···
199
<Show when={!hide()}>
200
<Show when={blob.mimeType.startsWith("image/")}>
201
<img
202
+
class="h-auto max-h-48 max-w-48 object-contain sm:max-h-64 sm:max-w-64"
203
src={`https://${pds()}/xrpc/com.atproto.sync.getBlob?did=${props.repo}&cid=${blob.ref.$link}`}
204
onLoad={() => setMediaLoaded(true)}
205
/>
···
216
<Show when={mediaLoaded()}>
217
<button
218
onclick={() => setHide(true)}
219
+
class="absolute top-1 right-1 flex items-center rounded-lg bg-neutral-900/70 p-1.5 text-white opacity-0 backdrop-blur-sm transition-opacity group-hover/media:opacity-100 hover:bg-neutral-900/80 active:bg-neutral-900/90 dark:bg-neutral-100/70 dark:text-neutral-900 dark:hover:bg-neutral-100/80 dark:active:bg-neutral-100/90"
220
>
221
<span class="iconify lucide--eye-off text-base"></span>
222
</button>