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>

src/routes/(tiles)/+page.svelte

@@ -1,22 +1,26 @@
 <script>
     import iconSynzr from "$lib/assets/icons/synzr.webp";
 
+    import imageTestRectangle from "$lib/assets/images/test-rectangle.webp";
+    import imageTestSquare from "$lib/assets/images/test-square.webp";
+
     import Tile from "$lib/components/tiles/Tile.svelte";
     import TileGroup from "$lib/components/tiles/TileGroup.svelte";
-    import TileIconPage from "$lib/components/tiles/TileIconPage.svelte";
+    import TileIconPage from "$lib/components/tiles/pages/TileIconPage.svelte";
+    import TileImagePage from "$lib/components/tiles/pages/TileImagePage.svelte";
 </script>
 
 <TileGroup title="a lot of mikhails" rows={3} columns={3}>
     <Tile size="small" row={5} column={2}>
-        <TileIconPage icon={iconSynzr} />
+        <TileIconPage icon={iconSynzr} name="mikhail" />
-    </Tile>
-    <Tile size="large" row={1} column={1}>
-        <TileIconPage icon={iconSynzr} name="synzr" />
     </Tile>
     <Tile size="medium" row={3} column={5}>
-        <TileIconPage icon={iconSynzr} name="synzr" />
+        <TileIconPage icon={iconSynzr} name="mikhail" />
     </Tile>
     <Tile size="wide" row={5} column={3}>
-        <TileIconPage icon={iconSynzr} name="synzr" />
+        <TileImagePage image={imageTestRectangle} />
+    </Tile>
+    <Tile size="large" row={1} column={1}>
+        <TileImagePage image={imageTestSquare} />
     </Tile>
 </TileGroup>