🚧 Switch to monorepo with Turbo

apps/website/src/components/layouts/PosterLayout.svelte

@@ -0,0 +1,134 @@
+<style lang="scss">
+    @import "../../style/layouts/poster";
+</style>
+
+<script lang="ts">
+    import { addToCart } from '$utils/functions/shop'
+    import { capitalizeFirstLetter } from '$utils/functions'
+    // Components
+    import SplitText from '$components/SplitText.svelte'
+    import Button from '$components/atoms/Button.svelte'
+    import Image from '$components/atoms/Image.svelte'
+    import ScrollingTitle from '$components/atoms/ScrollingTitle.svelte'
+    import Carousel from '$components/organisms/Carousel.svelte'
+
+    export let product: any
+    export let shopProduct: any
+
+    $: hasStock = shopProduct.stock_level > 0
+
+
+    /**
+     * Preview photos specs
+     */
+    let lastPreviewPhoto: any = undefined
+
+    $: if (product && product.photos_preview.length) {
+        lastPreviewPhoto = product.photos_preview[product.photos_preview.length - 1].directus_files_id
+    }
+
+    // Images sizes
+    const photosPreview = [
+        {
+            sizes: {
+                small: { width: 275 },
+                medium: { width: 500 },
+                large: { width: 800 },
+            },
+            ratio: 0.75,
+        },
+        {
+            sizes: {
+                small: { width: 200 },
+                medium: { width: 300 },
+                large: { width: 400 },
+            },
+            ratio: 0.8,
+        },
+        {
+            sizes: {
+                small: { width: 200 },
+                medium: { width: 300 },
+                large: { width: 400 },
+            },
+            ratio: 1.28,
+        },
+        {
+            sizes: {
+                small: { width: 450 },
+                medium: { width: 700 },
+                large: { width: 1000 },
+            },
+            ratio: 0.68,
+        },
+    ]
+</script>
+
+<section class="poster-layout grid" id="poster">
+    <div class="poster-layout__title">
+        <ScrollingTitle tag="h2" label={product.location.name}>
+            <SplitText mode="chars" text={product.location.name} />
+        </ScrollingTitle>
+    </div>
+
+    <aside class="poster-layout__buy">
+        <div class="poster-layout__info">
+            <dl>
+                <dt class="title-small">{capitalizeFirstLetter(product.type)}</dt>
+                <dd class="text-info">{shopProduct.name} – {shopProduct.price}€</dd>
+            </dl>
+            <Button
+                tag="button"
+                text={hasStock ? 'Add to cart' : 'Sold out'}
+                color="pinklight"
+                disabled={!hasStock}
+                on:click={() => addToCart(shopProduct)}
+            />
+        </div>
+
+        <Carousel
+            class="shadow-box-dark"
+            slides={product.photos_product.map(({ directus_files_id }) => ({
+                id: directus_files_id.id,
+                alt: directus_files_id.title,
+            }))}
+        />
+    </aside>
+
+    {#if product.photos_preview.length}
+        <div class="poster-layout__images grid container">
+            {#each product.photos_preview.slice(0, 3) as { directus_files_id}, index}
+                <Image
+                    class="image image--{index + 1} photo shadow-box-light"
+                    id={directus_files_id.id}
+                    sizeKey="photo-list"
+                    sizes={photosPreview[index].sizes}
+                    ratio={photosPreview[index].ratio}
+                    alt={directus_files_id.title}
+                />
+            {/each}
+        </div>
+    {/if}
+
+    <div class="poster-layout__about grid">
+        <div class="text container">
+            {#if product.description}
+                <p class="headline text-large">{product.description}</p>
+            {/if}
+            {#if product.details}
+                <p class="details text-xsmall">{product.details}</p>
+            {/if}
+        </div>
+    </div>
+
+    {#if lastPreviewPhoto}
+        <Image
+            class="image image--4 photo shadow-box-light"
+            id={lastPreviewPhoto.id}
+            sizeKey="photo-grid"
+            sizes={photosPreview[photosPreview.length - 1].sizes}
+            ratio={photosPreview[photosPreview.length - 1].ratio}
+            alt={lastPreviewPhoto.title}
+        />
+    {/if}
+</section>