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

<!--
@component

Image page for a tile. Must be in a tile to display correctly.
-->

<script lang="ts">
    let {
        image,
    }: {
        /**
         * Image. Must be a valid image URL.
         */
        image: string;
    } = $props();
</script>

<div
    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-[20px] mt-auto aspect-square bg-contain bg-center bg-no-repeat self-end m-2"
        style="background-image: var(--tile-icon);"
    ></div>
</div>