noway.gabb.fr
this repo has no description
1<script lang="ts">
2 import { onMount } from 'svelte';
3 import type { Artwork } from '@jet-app/app-store/api/models';
4 import AppIcon, { type AppIconProfile } from '~/components/AppIcon.svelte';
5
6 export let icons: Artwork[];
7 export let profile: AppIconProfile = 'app-icon-river';
8
9 $: aspectRatio = icons[0].width / icons[0].height;
10
11 let mounted = false;
12 const numberOfIcons = icons.length;
13
14 // We shift the order of the bottom row of icons to ensure that the same icons aren't shown
15 // next to each other. Note that this is different from purely shuffling the icons, as that
16 // could still lead to the same icons being next to one another, due to how small the set is.
17 // The input and output here is as such:
18 // in = [1, 2, 3, 4, 5, 6, 7]
19 // out = [4, 5, 6, 7, 1, 2, 3]
20 const iconsInShiftedOrder = [
21 ...icons.slice(numberOfIcons / 2),
22 ...icons.slice(0, numberOfIcons / 2),
23 ];
24
25 // We are quadrupling the icons we render so the flow is seamless and stretches across the
26 // full width of the container.
27 const topRow = Array(4).fill(icons).flat();
28 const bottomRow = Array(4).fill(iconsInShiftedOrder).flat();
29
30 // We use this `mounted` flag to defer the rendering of the `AppIconRiver`, since it's markup heavy
31 // and has no semantic meaning for SEO. This deferring saves about 190kb of initial HTML per instance.
32 onMount(() => (mounted = true));
33</script>
34
35{#if mounted}
36 {#each [topRow, bottomRow] as iconRow}
37 <ul class="app-icons">
38 {#each iconRow as icon}
39 <li
40 class="app-icon-container"
41 style:--aspect-ratio={aspectRatio}
42 >
43 <AppIcon {icon} {profile} fixedWidth={false} />
44 </li>
45 {/each}
46 </ul>
47 {/each}
48{/if}
49
50<style lang="scss">
51 @use '@amp/web-shared-styles/sasskit-stylekit/ac-sasskit-config';
52 @use 'ac-sasskit/core/locale' as *;
53
54 .app-icons {
55 --icon-width: var(--app-icon-river-icon-width, 128px);
56 --speed: var(--app-icon-river-speed, 240s);
57 --direction: -50%;
58
59 @include rtl {
60 --direction: 50%;
61 }
62 display: flex;
63 width: fit-content;
64 z-index: 2;
65 animation: scroll var(--speed) linear infinite;
66 }
67
68 .app-icons:last-of-type {
69 margin-bottom: 20px;
70 }
71
72 .app-icon-container {
73 width: var(--icon-width);
74 aspect-ratio: var(--aspect-ratio);
75 margin: 8px;
76 }
77
78 .app-icons:last-of-type .app-icon-container {
79 position: relative;
80 right: calc((var(--icon-width) / 2) + 8px);
81 }
82
83 @keyframes scroll {
84 0% {
85 transform: translateX(0);
86 }
87
88 100% {
89 transform: translateX(var(--direction));
90 }
91 }
92</style>