🚧 Switch to monorepo with Turbo

apps/website/src/components/organisms/ShopModule.svelte

@@ -0,0 +1,93 @@
+<style lang="scss">
+    @import "../../style/organisms/shop";
+</style>
+
+<script lang="ts">
+    import { getContext, onMount } from 'svelte'
+    // Components
+    import Button from '$components/atoms/Button.svelte'
+    import Image from '$components/atoms/Image.svelte'
+
+    const { locations, shop }: any = getContext('global')
+    const locationsWithPoster = locations
+        // Filter locations with posters only
+        .filter((loc: Location) => loc.has_poster)
+        // Sort locations alphabetically from slug (a>z)
+        .sort((a: Location, b: Location) => a.slug.localeCompare(b.slug))
+        // Return name only
+        .map((loc: Location) => loc.name)
+
+    export let images: any[] = shop.module_images
+    export let title: string = shop.module_title
+    export let text: string = shop.module_text
+    export let textBottom: string = undefined
+    export let buttonText: string = 'Shop'
+    export let url: string = '/shop'
+    export let enabled: boolean = true
+
+    if (textBottom !== null) {
+        textBottom = `Posters available for ${locationsWithPoster.join(', ').replace(/,(?!.*,)/gmi, ' and')}.`
+    }
+
+    interface Location {
+        slug: string
+        name: string
+        has_poster: boolean
+    }
+
+    // Image rotation
+    let imagesLoop: ReturnType<typeof setTimeout>
+    let currentImageIndex = 0
+
+    const incrementCurrentImageIndex = () => {
+        currentImageIndex = currentImageIndex === images.length - 1 ? 0 : currentImageIndex + 1
+        imagesLoop = setTimeout(() => requestAnimationFrame(incrementCurrentImageIndex), 3000)
+    }
+
+    onMount(() => {
+        if (images.length > 1) {
+            incrementCurrentImageIndex()
+        }
+
+        return () => {
+            // Clear rotating words timeout
+            if (imagesLoop) {
+                clearTimeout(imagesLoop)
+            }
+        }
+    })
+</script>
+
+<div class="shop shadow-box-dark" class:has-no-bottom={!textBottom}>
+    <div class="content">
+        <div class="shop__images">
+            {#if images}
+            <a href={enabled ? url : undefined} title="Visit our shop" data-sveltekit-noscroll>
+                {#each images as { directus_files_id: { id, title }}, index}
+                    <Image
+                        class={index === currentImageIndex ? 'is-visible' : null}
+                        {id}
+                        sizeKey="square"
+                        sizes={{
+                            small: { width: 400, height: 400 },
+                            large: { width: 800, height: 800 },
+                        }}
+                        alt={title}
+                    />
+                {/each}
+            </a>
+            {/if}
+        </div>
+
+        <div class="shop__content">
+            <h2 class="title-medium">{title}</h2>
+            <p class="text-small">{text}</p>
+            {#if enabled}
+                <Button {url} text={buttonText} color="pinklight" />
+            {/if}
+            {#if textBottom}
+                <p class="detail">{textBottom}</p>
+            {/if}
+        </div>
+    </div>
+</div>