webspace/src/lib/components/tiles/Tile.svelte

<!--
@component

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;

    /**
     * Properties.
     */
    let {
        size,
        row,
        column,
        children,
    }: {
        /**
         * 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;

        /**
         * Pages.
         */
        children: () => any;
    } = $props();

    /**
     * Tile style.
     **/
    const style = cva(["bg-(--tile-color)", "overflow-y-hidden"], {
        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"],
            },
        },
    });

    /**
     * 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="
        --tile-icon-size: {iconSize};
        --tile-name-display: {size !== 'small' ? 'inline' : 'none'};
        grid-row-start: {row};
        grid-column-start: {column};
    "
>
    {@render children()}
</div>