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

<script lang="ts">
    import { apiBaseURL } from "../../../config"
    export let col: Column
    export let pageId: string

    let active = -1
    setInterval(() => {
        active += 1
        if (active == col.iconCycleSquare.boxes.length) active = 0
    }, 1000)
</script>

<div class="iconCycleSquares">
    {#each col?.iconCycleSquare?.boxes as box, i}
        <div class="box" id="box{i}" class:active="{i == active}">
            <div class="content">
                <div class="icon">
                    <svg
                        stroke="{i == active ? 'black' : 'white'}"
                        fill="{i == active ? 'black' : 'white'}"
                        data-src="{apiBaseURL}page/{pageId}/{box.icon?.src}"></svg>
                </div>
                <div class="text">
                    {box.text}
                </div>
            </div>
        </div>
    {/each}
</div>

<style lang="less">
    @import "../../assets/css/main.less";
    .iconCycleSquares {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        font-size: 0.8rem;
        transition: all 600ms;

        @media @tablet {
            gap: 20px;
            font-size: 1rem;
        }
        .box {
            border: 4px solid @bg-color-secondary;
            background-color: @bg-color-secondary;
            display: flex;
            align-items: center;
            justify-content: center;
            color: @font-color-secondary;

            &.active {
                background-color: @bg-color;
                color: @font-color;
            }
            width: 140px;
            height: 150px;
            .content {
                display: flex;
                flex-direction: column;
                align-items: center;

                .text {
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    text-align: center;
                    font-family: "Libre Caslon Text", serif;
                }
            }
            @media @tablet {
                width: 270px;
                height: 270px;
                gap: 30px;
            }
        }
    }
</style>