feat(components/tiles/pages): image page

src/lib/components/tiles/Tile.svelte

@@ -7,9 +7,14 @@ Metro-like tile. Must be in a group to display correctly.
 <script lang="ts">
     import { cva } from "class-variance-authority";
 
-    // Base size for a icon in pixels.
+    /**
+     * Base size for a icon in pixels.
+     **/
     const ICON_BASE_SIZE = 45;
 
+    /**
+     * Properties.
+     */
     let {
         size,
         row,
@@ -45,7 +50,7 @@ Metro-like tile. Must be in a group to display correctly.
             size: {
                 small: ["row-span-1", "col-span-1"],
                 medium: ["row-span-2", "col-span-2"],
-                wide: ["row-span-4", "col-span-2"],
+                wide: ["row-span-2", "col-span-4"],
                 large: ["row-span-4", "col-span-4"],
             },
         },

src/lib/components/tiles/pages/TileIconPage.svelte

@@ -10,7 +10,7 @@ Icon page for a tile. Must be in a tile to display correctly.
         name,
     }: {
         /**
-         * Icon. Must be a valid image URL.
+         * Icon. Must be a valid URL.
          */
         icon: string;
 

src/lib/components/tiles/pages/TileImagePage.svelte

@@ -0,0 +1,21 @@
+<!--
+@component
+
+Image page for a tile. Must be in a tile to display correctly.
+-->
+
+<script lang="ts">
+    let {
+        image,
+    }: {
+        /**
+         * Image. Must be a valid image URL.
+         */
+        image: string;
+    } = $props();
+</script>
+
+<div
+    class="w-full h-full bg-cover bg-center bg-no-repeat"
+    style="background-image: url('{image}');"
+></div>