wm-fontis-tibi-2023/frontend/src/lib/components/widgets/image.svelte

<script lang="ts">
    import { apiBaseURL } from "../../../config"
    import { mediaLibrary } from "../../store"
    export let image: string
    export let pageId: string
    export let col: { contentType: "image"; image: string; icons: { icon: string; link: string }[] }
</script>

<div class="image-container">
    <img src="{`${apiBaseURL}medialib/${image}/${$mediaLibrary[image]?.file?.src}`}" alt="img" />
</div>
{#if col && col.icons}
    <div class="icons">
        {#each col.icons as icon}
            <div class="icon">
                <a href="{icon.link}" style="text-decoration: none;" target="_blank">
                    <img
                        src="{`${apiBaseURL}medialib/${icon.icon}/${$mediaLibrary[icon.icon]?.file?.src}`}"
                        alt="img"
                    />
                </a>
            </div>
        {/each}
    </div>
{/if}

<style lang="less">
    .image-container {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
            object-fit: contain;
            width: 100%;
            height: 100%;
        }
    }

    .icons {
        height: 60px;
        display: flex;
        justify-content: flex-start;
        gap: 20px;
    }
</style>