✨ Add data to Shop page

src/components/layouts/PosterLayout.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+    import { capitalizeFirstLetter } from '$utils/functions'
+    // Components
+    import Button from '$components/atoms/Button.svelte'
+    import Image from '$components/atoms/Image.svelte'
+    import Carousel from '$components/organisms/Carousel.svelte'
+
+    export let product: any
+
+
+    /**
+     * Preview photos specs
+     */
+    let lastPreviewPhoto: any = undefined
+    $: if (product.photos_preview.length) {
+        lastPreviewPhoto = product.photos_preview[product.photos_preview.length - 1].directus_files_id
+    }
+    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">
+    <h2 class="title-huge">
+        {product.location.name}
+    </h2>
+
+    <aside class="poster-layout__buy">
+        <div class="poster-layout__info">
+            <dl>
+                <dt>{capitalizeFirstLetter(product.type)}</dt>
+                <dd>{product.name} – 30€</dd>
+            </dl>
+            <Button
+                text="Add to cart"
+                color="pink"
+            />
+        </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, product.photos_preview.length - 1) 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>{product.description}</p>
+            {/if}
+            {#if product.details}
+                <p class="details">{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>