feat(components/tiles): basic tiles

src/lib/components/tiles/Tile.svelte

@@ -0,0 +1,59 @@
+<!--
+@component
+
+Metro-like tile. Must be in a group to display correctly.
+-->
+
+<script lang="ts">
+    import { cva } from "class-variance-authority";
+
+    let {
+        size,
+        row,
+        column,
+        icon,
+    }: {
+        /**
+         * Size.
+         */
+        size: "small" | "medium" | "wide" | "large";
+
+        /**
+         * Row index. Must be in a small tiles.
+         */
+        row: number;
+
+        /**
+         * Column index. Must be in a small tiles.
+         */
+        column: number;
+
+        /**
+         * Icon.
+         */
+        icon: string;
+    } = $props();
+
+    /**
+     * Tile style.
+     **/
+    const style = cva(["bg-(--tile-color)", "bg-center", "bg-no-repeat"], {
+        variants: {
+            size: {
+                small: "bg-size-[45px]",
+                medium: ["col-span-2", "row-span-2", "bg-size-[90px]"],
+                wide: ["col-span-4", "row-span-2", "bg-size-[90px]"],
+                large: ["col-span-4", "row-span-4", "bg-size-[180px]"],
+            },
+        },
+    });
+</script>
+
+<div
+    class={style({ size })}
+    style="
+        background-image: url({icon});
+        grid-column-start: {column};
+        grid-row-start: {row};
+    "
+></div>