refactor(components/tiles): icon/name page as a seperate component

src/lib/components/tiles/Tile.svelte

@@ -7,11 +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.
+    const ICON_BASE_SIZE = 45;
+
     let {
         size,
         row,
         column,
-        icon,
+        children,
     }: {
         /**
          * Size.
@@ -29,15 +32,15 @@ Metro-like tile. Must be in a group to display correctly.
         column: number;
 
         /**
-         * Icon.
+         * Pages.
          */
-        icon: string;
+        children: () => any;
     } = $props();
 
     /**
      * Tile style.
      **/
-    const style = cva(["bg-(--tile-color)", "bg-center", "bg-no-repeat"], {
+    const style = cva(["bg-(--tile-color)", "overflow-y-hidden"], {
         variants: {
             size: {
                 small: "bg-size-[45px]",
@@ -47,13 +50,33 @@ Metro-like tile. Must be in a group to display correctly.
             },
         },
     });
+
+    /**
+     * Icon size. Based on tile's size.
+     */
+    let iconSize: string = $state("0");
+    switch (size) {
+        case "small":
+            iconSize = `${ICON_BASE_SIZE}px`;
+            break;
+        case "medium":
+        case "wide":
+            iconSize = `${ICON_BASE_SIZE * 2}px`;
+            break;
+        case "large":
+            iconSize = `${ICON_BASE_SIZE * 4}px`;
+            break;
+    }
 </script>
 
 <div
     class={style({ size })}
     style="
-        background-image: url({icon});
+        --tile-icon-size: {iconSize};
-        grid-column-start: {column};
+        --tile-name-display: {size !== 'small' ? 'inline' : 'none'};
         grid-row-start: {row};
+        grid-column-start: {column};
     "
-></div>
+>
+    {@render children()}
+</div>

src/lib/components/tiles/TileIconPage.svelte

@@ -0,0 +1,39 @@
+<!--
+@component
+
+Icon page for a tile. Must be in a tile to display correctly.
+-->
+
+<script lang="ts">
+    let {
+        icon,
+        name,
+    }: {
+        /**
+         * Icon. Must be a valid image URL.
+         */
+        icon: string;
+
+        /**
+         * Name.
+         */
+        name?: string;
+    } = $props();
+</script>
+
+<div
+    class="h-full flex flex-col justify-end bg-center bg-no-repeat"
+    style="
+        background-image: url('{icon}');
+        background-size: var(--tile-icon-size);
+    "
+>
+    {#if name}
+        <h1
+            class="w-full p-2 text-white select-none"
+            style="display: var(--tile-name-display);"
+        >
+            {name}
+        </h1>
+    {/if}
+</div>

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

@@ -3,11 +3,20 @@
 
     import Tile from "$lib/components/tiles/Tile.svelte";
     import TileGroup from "$lib/components/tiles/TileGroup.svelte";
+    import TileIconPage from "$lib/components/tiles/TileIconPage.svelte";
 </script>
 
 <TileGroup title="a lot of mikhails" rows={3} columns={3}>
-    <Tile size="small" icon={iconSynzr} row={5} column={2} />
+    <Tile size="small" row={5} column={2}>
-    <Tile size="large" icon={iconSynzr} row={1} column={1} />
+        <TileIconPage icon={iconSynzr} />
-    <Tile size="medium" icon={iconSynzr} row={3} column={5} />
+    </Tile>
-    <Tile size="wide" icon={iconSynzr} row={5} column={3} />
+    <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" />
+    </Tile>
+    <Tile size="wide" row={5} column={3}>
+        <TileIconPage icon={iconSynzr} name="synzr" />
+    </Tile>
 </TileGroup>