File size: 2,064 Bytes
5e27702 |
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 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<script lang="ts">
import Container from '$lib/components/Container.svelte';
import Picture from '$lib/components/Picture.svelte';
import type { PageData } from './$types';
import { marked } from 'marked';
export let data: PageData;
const product = data.product;
let photoIndex = 0;
function submit() {
alert(
"Cette partie de l'e-shop n'est pas encore implémentée. Veuillez prendre contact par mail ([email protected]), téléphone (07 74 52 11 15) ou instagram."
);
}
</script>
<Container>
<article class="flex my-8 lg:my-16 flex-wrap lg:flex-nowrap">
<div class="grow lg:basis-0 justify-center items-center flex flex-col">
<!-- svelte-ignore security-anchor-rel-noreferrer -->
<a href="/photos/raw/{product.photos[photoIndex].storage[0]._id}" target="_blank">
<Picture
picture={product.photos[photoIndex]}
title="Cliquez pour voir la photo entière"
class="max-w-full max-h-md lg:max-h-xl rounded-3xl"
/>
</a>
{#if product.photos.length > 1}
<div style="gap: 0.5rem" class="flex justify-start w-full ml-8 mt-2">
{#each product.photos as photo, i}
<Picture
picture={photo}
style="border-color: #865716"
class="w-16 h-16 object-cover cursor-pointer box-border {i === photoIndex
? 'border border-4'
: ''} rounded-md"
on:click={() => (photoIndex = i)}
/>
{/each}
</div>
{/if}
</div>
<div class="grow lg:basis-0 lg:px-8 mt-6 lg:m-t0">
<h1 class="text-oxford text-4xl">{product.name}</h1>
<div class="mt-4 flex items-center">
<span class="font-bold text-2xl mr-2">{product.price} €</span> (+ frais de livraison hors Finistère)
</div>
<div class="marked leading-6">
{@html marked(product.description)}
</div>
<form action="post">
<button
type="submit"
on:click|preventDefault={submit}
class="mt-4 text-xl leading-6 py-3 px-6 bg-oxford border-0 shadow text-white rounded-md cursor-pointer"
>
Acheter
</button>
</form>
</div>
</article>
</Container>
|