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>

src/lib/components/tiles/TileGroup.svelte

@@ -0,0 +1,63 @@
+<!--
+@component
+
+A group of tiles. Places them correctly in a grid.
+-->
+
+<script lang="ts">
+    let {
+        title,
+        rows,
+        columns,
+        color = "var(--color-brand)",
+        children,
+    }: {
+        /**
+         * Group title.
+         */
+        title?: string;
+
+        /**
+         * Row count.
+         */
+        rows: number;
+
+        /**
+         * Column count.
+         */
+        columns: number;
+
+        /**
+         * Color. Must be a valid CSS color.
+         */
+        color?: string;
+
+        /**
+         * Tiles.
+         */
+        children: () => any;
+    } = $props();
+
+    // NOTE: to make it usable for small tiles
+    columns *= 2;
+    rows *= 2;
+</script>
+
+<section>
+    <!-- Group title -->
+    {#if title}
+        <h1 class="py-2 select-none">{title}</h1>
+    {/if}
+
+    <!-- Group content -->
+    <div
+        class="grid"
+        style="
+            --tile-color: {color};
+            grid-template-columns: repeat({columns}, 75px);
+            grid-template-rows: repeat({rows}, 75px);
+        "
+    >
+        {@render children()}
+    </div>
+</section>