spartacus-inventur-frontend/src/lib/Drink.svelte

<!-- svelte-ignore a11y-missing-attribute -->
<!-- svelte-ignore a11y-click-events-have-key-events -->

<script lang="ts">
    import { activeCategory, drinks } from "../stores.js";
    import { fade, fly } from "svelte/transition";
</script>

<section class="section">
    <div class="container">
        {#if $activeCategory == ""}
            <article class="message is-info">
                <div class="message-header">
                    <p>hey!</p>
                </div>
                <div class="message-body">
                    <p>waehle oben eine kategorie aus, um mit der inventur loszulegen.</p>
                </div>
            </article>
        {:else}
            {#each $drinks as drink, name}
                {#if drink.type == $activeCategory}
                    <div in:fly="{{ x: 200, duration: 300 }}" out:fly="{{ y: 400, duration: 0 }}" class="box">
                        <h1>{drink.name}</h1>
                    </div>
                {/if}
            {/each}
        {/if}
    </div>
</section>