···

       
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>