add image preview

src/components/artDialog.svelte

@@ -0,0 +1,41 @@
+<script>
+	import { fade } from 'svelte/transition';
+    export var selectedImage;
+    $: console.log("image", selectedImage);
+</script>
+
+{#if selectedImage}
+    <dialog open on:click={() => selectedImage = null} transition:fade={{ duration: 200 }}>
+        <img src={selectedImage} alt="">
+        <button>Tap to close</button>
+    </dialog>
+{/if}
+
+<style>
+    dialog[open] {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        background: rgba(255, 255, 255, 0.6);
+        backdrop-filter: blur(15px);
+        z-index: 100;
+        border: none;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    dialog img {
+        border-radius: 5px;
+        max-height: 100%;
+        max-width: 100%;
+    }
+    dialog button {
+        position: absolute;
+        bottom: 5px;
+        left: 5px;
+    }
+</style>

src/components/artList.svelte

@@ -6,7 +6,7 @@
     let list;
     $: list = request("cover?manga[]=" + mangaId + "&locales[]=en&locales[]=uk&locales[]=ja");
 
-    $: list.then(data => console.log(data));
+    export var selectedImage = null;
 </script>
 
 <div>
@@ -14,7 +14,7 @@
         Loading art
     {:then list}
         {#each list.data.sort((a, b) => a.attributes.volume - b.attributes.volume) as item}
-            <img width=512 height=805 src="https://cors-anywhere.danbulant.workers.dev/?https://uploads.mangadex.org/covers/{mangaId}/{item.attributes.fileName}.512.jpg" alt="">
+            <img on:click={() => selectedImage = `https://cors-anywhere.danbulant.workers.dev/?https://uploads.mangadex.org/covers/${mangaId}/${item.attributes.fileName}.512.jpg`} width=512 height=805 src="https://cors-anywhere.danbulant.workers.dev/?https://uploads.mangadex.org/covers/{mangaId}/{item.attributes.fileName}.512.jpg" alt="">
         {/each}
     {/await}
 </div>
@@ -27,7 +27,7 @@
         justify-content: start;
         align-items: start;
     }
-    img {
+    div img {
         border-radius: 5px;
         height: 10rem;
         width: auto;

src/pages/[manga]/index.svelte

@@ -12,6 +12,7 @@
     import { Swiper, SwiperSlide } from 'swiper/svelte';
     import ArtList from "../../components/artList.svelte";
     import SvelteMarkdown from 'svelte-markdown'
+import ArtDialog from "../../components/artDialog.svelte";
 
     export var scoped;
 
@@ -268,6 +269,8 @@
         if(selectedTab !== tabs[swiper.realIndex])
             selectedTab = tabs[swiper.realIndex];
     }
+
+    var selectedImage = null;
 </script>
 
 <svelte:window on:beforeUnload={beforeUnload} />
@@ -283,6 +286,8 @@
     {/if}
 {/await}
 
+<ArtDialog bind:selectedImage />
+
 <main>
 
     <h1>{title}</h1>
@@ -397,7 +402,7 @@
         </SwiperSlide>
         <SwiperSlide>
             <div style="min-height: 30rem;">
-                <ArtList {mangaId} />
+                <ArtList {mangaId} bind:selectedImage />
             </div>
         </SwiperSlide>
         <SwiperSlide>