src/routes/vente/[id]/+page.svelte

<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 (contact@bergereenchantee.fr), 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>