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,30 +111,34 @@ 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",
-        ],
-        {
-            variants: {
-                size: {
-                    small: ["row-span-1", "col-span-1"],
-                    medium: ["row-span-2", "col-span-2"],
-                    wide: ["row-span-2", "col-span-4"],
-                    large: ["row-span-4", "col-span-4"],
-                },
+    const style = cva(["relative", "bg-(--tile-color)/80"], {
+        variants: {
+            size: {
+                small: ["row-span-1", "col-span-1"],
+                medium: ["row-span-2", "col-span-2"],
+                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,25 +271,31 @@ 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}
     >
-        {@render children()}
+        {#if active}
+            {@render children()}
+        {:else}
+            <TileIconPage />
+        {/if}
     </div>
 
-    <!-- Tile border -->
-    <div
-        class="
-            absolute top-0
-            w-full h-full
-            border-2 border-white
-            opacity-0 hover:opacity-50 hover:mask-(--mask) active:opacity-100
-            duration-75 ease-in-out
-        "
-        style="
-            --mask: radial-gradient(
-                {TILE_BASE_SIZE}px
-                at {mousePosition.x}px {mousePosition.y}px,
-                black 45%,
-                transparent
-            );
-        "
-    ></div>
+    {#if active}
+        <!-- Tile border -->
+        <div
+            class="
+                absolute top-0
+                w-full h-full
+                border-2 border-white
+                opacity-0 hover:opacity-50 hover:mask-(--mask) active:opacity-100
+                duration-75 ease-in-out
+            "
+            style="
+                --mask: radial-gradient(
+                    {TILE_BASE_SIZE}px
+                    at {mousePosition.x}px {mousePosition.y}px,
+                    black 45%,
+                    transparent
+                );
+            "
+        ></div>
+    {/if}
 </a>