Files renamed, gallery component abstracted

src/App.svelte

@@ -1,13 +1,13 @@
 <script>
   import _data from "./json/data.json";
-  import Gallery from "./lib/Gallery.svelte";
+  import Gallery from "./lib/GallerySection.svelte";
   import FixedScrollUpButton from "./lib/FixedScrollUpButton.svelte";
   import Header from "./lib/Header.svelte";
   import HeaderBar from "./lib/HeaderBar.svelte";
   import { fade } from "svelte/transition";
-  import Prices from "./lib/Prices.svelte";
+  import Prices from "./lib/PricesSection.svelte";
   import { deactivateTag } from "./assets/ToggleStore.js";
-    import Tos from "./lib/Tos.svelte";
+    import Tos from "./lib/TosSection.svelte";
 
   let currentHash = location.hash;
 

src/lib/Gallery.svelte

@@ -1,38 +1,13 @@
 <script>
-  import BackButton from "./BackButton.svelte";
-import Image from "./Image.svelte";
-  import ToggleButton from "./ToggleButton.svelte";
+    import Image from "./Image.svelte";
 
-  export let images;
-  const tags = ["All", "Comms", "Pokemon", "PMD", "Transform", "Zorio", "Nahi", "Other"]
+    export let images;
 </script>
 
-<div class="w-full px-1">
-  <ul class="flex flex-wrap w-fit h-fit">
-    {#each tags as tag, i}
-    <li class="flex-grow xl:m-2 m-1">
-    <ToggleButton text={tag} enabled={i == 0}/>
-    </li>
-  {/each}
-  </ul>
-</div>
-
 <div class="w-full">
-  <ul class="flex flex-wrap w-full h-fit">
-    {#each images as i}
-       <Image image={i} thumbnail={{...i, src: i.src.replace('gallery\\', 'thumbnails\\')}}  />
-    {/each}
-  </ul>
-</div>
-
-<div class="w-full flex justify-center">
-  <BackButton />
-</div>
-
-<div class="flex flex-col w-full h-fit pt-8 xl:px-16 px-8">
-  <h1 class="xl:text-sm text-xs text-slate-300 text-center pb-4">
-    The characters and trademarks mentioned are the property of their respective owners.
-    their respective owners. This content is used for illustrative purposes only and is not intended to
-    infringe the copyrights of the mentioned owners.
-  </h1>
-</div>
+    <ul class="flex flex-wrap w-full h-fit">
+      {#each images as i}
+         <Image image={i} thumbnail={{...i, src: i.src.replace('gallery\\', 'thumbnails\\')}}  />
+      {/each}
+    </ul>
+  </div>

src/lib/GallerySection.svelte

@@ -0,0 +1,33 @@
+<script>
+  import BackButton from "./BackButton.svelte";
+    import Gallery from "./Gallery.svelte";
+import Image from "./Image.svelte";
+  import ToggleButton from "./ToggleButton.svelte";
+
+  export let images;
+  const tags = ["All", "Comms", "Pokemon", "PMD", "Transform", "Zorio", "Nahi", "Other"]
+</script>
+
+<div class="w-full px-1">
+  <ul class="flex flex-wrap w-fit h-fit">
+    {#each tags as tag, i}
+    <li class="flex-grow xl:m-2 m-1">
+    <ToggleButton text={tag} enabled={i == 0}/>
+    </li>
+  {/each}
+  </ul>
+</div>
+
+<Gallery {images} />
+
+<div class="w-full flex justify-center">
+  <BackButton />
+</div>
+
+<div class="flex flex-col w-full h-fit pt-8 xl:px-16 px-8">
+  <h1 class="xl:text-sm text-xs text-slate-300 text-center pb-4">
+    The characters and trademarks mentioned are the property of their respective owners.
+    their respective owners. This content is used for illustrative purposes only and is not intended to
+    infringe the copyrights of the mentioned owners.
+  </h1>
+</div>

src/lib/Prices.svelte → src/lib/PricesSection.svelte

@@ -4,6 +4,7 @@
   import prices_posttf from "../json/prices_posttf.json";
   import Image from "./Image.svelte";
   import BackButton from "./BackButton.svelte";
+    import Gallery from "./Gallery.svelte";
 
   const categories = [
     {
@@ -33,13 +34,7 @@
       <h2 class="title">{category.title}</h2>
       <p class="text-white xl:text-2xl text-lg font-bold quicksand xl:py-8 py-4">{category.description}</p>
 
-      <div class="w-full">
-        <ul class="flex flex-wrap w-full h-fit">
-          {#each category.prices as price}
-            <Image image={price} thumbnail={{...price, src: price.src.replace('gallery\\', 'thumbnails\\')}}/>
-          {/each}
-        </ul>
-      </div>
+      <Gallery images={category.prices} />
 
       <h3 class="text-white text-2xl font-bold quicksand pt-8">
         Base price starting at <span class="quicksand-bold">{category.basePrice}</span><span class="font-semibold font-sans">€</span>