summaryrefslogtreecommitdiff
path: root/src/components/jet/today-card/overlay/TodayCardLockupListOverlay.svelte
blob: 1e7d297b3f03e0b516719f793b95a761fbc4d18d (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<script lang="ts" context="module">
    import type {
        TodayCardOverlay,
        TodayCardLockupListOverlay,
    } from '@jet-app/app-store/api/models';

    export function isLockupListOverlay(
        overlay: TodayCardOverlay,
    ): overlay is TodayCardLockupListOverlay {
        return overlay.kind === 'lockupList';
    }
</script>

<script lang="ts">
    import AppIcon from '~/components/AppIcon.svelte';
    import LinkWrapper from '~/components/LinkWrapper.svelte';

    export let overlay: TodayCardLockupListOverlay;
</script>

<div class="lockup-list">
    {#each overlay.lockups as lockup}
        <LinkWrapper action={lockup.clickAction}>
            <AppIcon icon={lockup.icon} />
        </LinkWrapper>
    {/each}
</div>

<style>
    .lockup-list {
        display: flex;
        gap: 12px;

        @media (--range-xsmall-only) and (--sidebar-visible) {
            gap: 10px;
        }

        @media (--range-small-up) {
            gap: 16px;
        }
    }
</style>