<script lang="ts">
    export let col: Column
    import inView from "../../functions/observer"
    let visible = false
    import { fade } from "svelte/transition"
</script>

<div class="boxList">
    {#each col.boxList.boxes as name, i}
        {#key visible}
            <div
                class="box"
                use:inView="{{ threshold: 0 }}"
                on:enter="{() => {
                    visible = true
                }}"
                in:fade="{{ duration: 500, delay: 100 + 80 * (i + 1) }}"
            >
                {name.name}
            </div>{/key}
    {/each}
</div>

<style lang="less">
    @import "../../assets/css/variables.less";

    .boxList {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        .box {
            padding: 5px 10px;
            background-color: var(--opposite-bg-color-80);
            color: var(--background-color);
            font-weight: bold;
            cursor: pointer;
            &:hover {
                background-color: var(--hover-color);
                color: var(--opposite-bg-color-80);
            }
        }
    }
</style>
