feat(components/tiles): better small icon

src/lib/components/tiles/Tile.svelte

@@ -8,6 +8,7 @@ Metro-like tile. Must be in a group to display correctly.
     import randomNumber from "$lib/utils/random-number";
     import { cva } from "class-variance-authority";
     import { onDestroy, onMount } from "svelte";
+    import TileIconPage from "./pages/TileIconPage.svelte";
 
     /**
      * Max angle value.
@@ -68,6 +69,8 @@ Metro-like tile. Must be in a group to display correctly.
         icon,
         column,
         children,
+        link = "#",
+        enabled = true,
     }: {
         /**
          * Size.
@@ -89,6 +92,16 @@ Metro-like tile. Must be in a group to display correctly.
          */
         icon: string;
 
+        /**
+         * Link.
+         */
+        link?: string;
+
+        /**
+         * Is tile enabled?
+         */
+        enabled?: boolean;
+
         /**
          * Pages.
          */
@@ -98,20 +111,7 @@ Metro-like tile. Must be in a group to display correctly.
     /**
      * Tile style.
      **/
-    const style = cva(
-        [
-            "relative",
-            "bg-(--tile-color)",
-            "perspective-distant",
-            "active:scale-95",
-            "active:transform-gpu",
-            "active:transform-3d",
-            "active:rotate-x-(--tile-rotate-x)",
-            "active:rotate-y-(--tile-rotate-y)",
-            "duration-75",
-            "ease-in-out",
-        ],
-        {
+    const style = cva(["relative", "bg-(--tile-color)/80"], {
         variants: {
             size: {
                 small: ["row-span-1", "col-span-1"],
@@ -119,9 +119,26 @@ Metro-like tile. Must be in a group to display correctly.
                 wide: ["row-span-2", "col-span-4"],
                 large: ["row-span-4", "col-span-4"],
             },
+            enabled: {
+                false: ["grayscale", "opacity-50"],
+                true: [
+                    "active:scale-95",
+                    "perspective-distant",
+                    "active:transform-gpu",
+                    "active:transform-3d",
+                    "active:rotate-x-(--tile-rotate-x)",
+                    "active:rotate-y-(--tile-rotate-y)",
+                    "duration-75",
+                    "ease-in-out",
+                ],
             },
         },
-    );
+    });
+
+    /**
+     * Is tile active?
+     */
+    const active = link !== "#" && enabled && children !== null;
 
     /**
      * Icon size.
@@ -235,7 +252,7 @@ Metro-like tile. Must be in a group to display correctly.
 </script>
 
 <a
-    class={style({ size })}
+    class={style({ size, enabled })}
     style="
         --tile-icon: url('{icon}');
         --tile-icon-size: {iconSize}px;
@@ -246,7 +263,7 @@ Metro-like tile. Must be in a group to display correctly.
         grid-row-start: {row};
         grid-column-start: {column};
     "
-    onmousemove={updateDynamicMouseValues}
+    onmousemove={active ? updateDynamicMouseValues : null}
     href="#h"
 >
     <!-- Tile pages -->
@@ -254,9 +271,14 @@ Metro-like tile. Must be in a group to display correctly.
         class="w-full h-full overflow-y-hidden scroll-smooth duration-150"
         bind:this={pages}
     >
+        {#if active}
             {@render children()}
+        {:else}
+            <TileIconPage />
+        {/if}
     </div>
 
+    {#if active}
         <!-- Tile border -->
         <div
             class="
@@ -275,4 +297,5 @@ Metro-like tile. Must be in a group to display correctly.
                 );
             "
         ></div>
+    {/if}
 </a>

src/lib/components/tiles/TileSmallIcon.svelte

@@ -0,0 +1,10 @@
+<!--
+@component
+
+Small icon for a tile pages.
+-->
+
+<div
+    class="w-8 mt-auto aspect-square bg-contain bg-center bg-no-repeat self-start m-2"
+    style="background-image: var(--tile-icon);"
+></div>

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

@@ -5,6 +5,8 @@ Image page for a tile. Must be in a tile to display correctly.
 -->
 
 <script lang="ts">
+    import TileSmallIcon from "../TileSmallIcon.svelte";
+
     let {
         image,
     }: {
@@ -19,8 +21,5 @@ Image page for a tile. Must be in a tile to display correctly.
     class="flex flex-col justify-end bg-cover bg-center bg-no-repeat"
     style="height: var(--tile-page-height); background-image: url('{image}');"
 >
-    <div
-        class="w-5 mt-auto aspect-square bg-contain bg-center bg-no-repeat self-end m-2"
-        style="background-image: var(--tile-icon);"
-    ></div>
+    <TileSmallIcon />
 </div>

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

@@ -5,6 +5,8 @@ Text page for a tile. Must be in a tile to display correctly.
 -->
 
 <script lang="ts">
+    import TileSmallIcon from "../TileSmallIcon.svelte";
+
     let {
         title,
         subtitle,
@@ -16,10 +18,8 @@ Text page for a tile. Must be in a tile to display correctly.
     } = $props();
 </script>
 
-<div
-    class="p-2 w-full flex flex-col gap-1 select-none text-white"
-    style="height: var(--tile-page-height);"
->
+<div class="w-full flex flex-col" style="height: var(--tile-page-height);">
+    <div class="w-full flex flex-col gap-1 p-2 select-none text-white">
         <h1 class="font-bold text-md">{title}</h1>
 
         {#if subtitle}
@@ -29,9 +29,7 @@ Text page for a tile. Must be in a tile to display correctly.
         {#if text}
             <p class="text-sm">{text}</p>
         {/if}
+    </div>
 
-    <div
-        class="w-5 mt-auto aspect-square bg-contain bg-center bg-no-repeat self-end"
-        style="background-image: var(--tile-icon);"
-    ></div>
+    <TileSmallIcon />
 </div>

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

@@ -12,22 +12,46 @@
 </script>
 
 <TileGroup title="a lot of mikhails" rows={3} columns={3}>
-    <Tile size="small" row={5} column={2} icon={iconSynzr}>
+    <Tile
+        size="small"
+        row={5}
+        column={2}
+        icon={iconSynzr}
+        link="https://example.com"
+    >
         <TileIconPage name="mikhail" />
         <TileTextPage title="Title" subtitle="Subtitle" text="Text" />
     </Tile>
 
-    <Tile size="medium" row={3} column={5} icon={iconSynzr}>
+    <Tile
+        size="medium"
+        row={3}
+        column={5}
+        icon={iconSynzr}
+        link="https://example.com"
+    >
         <TileImagePage image={imageTestSquare} />
         <TileTextPage title="Title" subtitle="Subtitle" text="Text" />
     </Tile>
 
-    <Tile size="wide" row={5} column={3} icon={iconSynzr}>
+    <Tile
+        size="wide"
+        row={5}
+        column={3}
+        icon={iconSynzr}
+        link="https://example.com"
+    >
         <TileIconPage name="mikhail" />
         <TileImagePage image={imageTestRectangle} />
     </Tile>
 
-    <Tile size="large" row={1} column={1} icon={iconSynzr}>
+    <Tile
+        size="large"
+        row={1}
+        column={1}
+        icon={iconSynzr}
+        link="https://example.com"
+    >
         <TileIconPage name="mikhail" />
         <TileImagePage image={imageTestSquare} />
     </Tile>