💄 Nicer-looking e-shop

Also added stock of products

src/routes/vente/+page.svelte

@@ -34,16 +34,48 @@
 	<Masonry>
 		{#each published as product}
 			<a href="/vente/{product._id}" class="product">
-				<div class="overflow-hidden">
+				<div class="overflow-hidden rounded relative">
+					{#if product.stock > 1}
+						<div
+							class="absolute z-1 right-0 p-4 bg-sunray text-white font-bold rounded-bl-lg"
+							style="font-family: 'Riot Squad', sans-serif;"
+						>
+							x {product.stock}
+						</div>
+					{/if}
 					<Picture
 						picture={product.photos[0]}
 						minStorage={1}
-						class="picture mx-auto max-w-full hover-zoom"
+						class="picture mx-auto max-w-full h-full hover-zoom rounded"
 					/>
 				</div>
-				<div class="flex">
-					<span class="name">{product.name}</span>
-					<span class="price ml-auto">{product.price} €</span>
+				<div class="flex items-center">
+					<span class="name text-lg">{product.name}</span>
+					<span class="price ml-auto text-oxford font-bold">{product.price} €</span>
+				</div>
+			</a>
+		{/each}
+		<!-- In case there is only one product. We don't want a product to take full row in desktop mode -->
+		<div />
+	</Masonry>
+</Container>
+
+<Container class="mb-4">
+	<h2 class="text-4xl text-oxford my-4" id="produits">Produits épuisés</h2>
+
+	<Masonry>
+		{#each retired as product}
+			<a href="/vente/{product._id}" class="product">
+				<div class="overflow-hidden rounded relative">
+					<Picture
+						picture={product.photos[0]}
+						minStorage={1}
+						class="picture mx-auto max-w-full h-full hover-zoom rounded"
+					/>
+				</div>
+				<div class="flex items-center">
+					<span class="name text-lg">{product.name}</span>
+					<span class="price ml-auto text-oxford font-bold line-through">{product.price} €</span>
 				</div>
 			</a>
 		{/each}

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

@@ -8,6 +8,7 @@
 
 	const product = data.product;
 	let photoIndex = 0;
+	let toBuy = 1;
 
 	function submit() {
 		alert(
@@ -46,21 +47,52 @@
 			<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)
+				<span class="font-bold text-2xl mr-2" class:line-through={product.stock === 0}
+					>{product.price} €</span
+				>
+				{#if product.stock}(+ frais de livraison hors Finistère){:else}<span class="text-red-500"
+						>Produit épuisé!</span
+					>{/if}
 			</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>
+			{#if product.stock}
+				<form action="post">
+					{#if product.stock > 1}
+						<div>
+							<button
+								type="button"
+								class="btn bg-gray-700 rounded-md"
+								class:bg-gray-400!={toBuy <= 1}
+								disabled={toBuy <= 1}
+								class:cursor-default!={toBuy <= 1}
+								on:click={() => --toBuy}>-</button
+							>
+							<span
+								class="text-xl text-sunray mx-2 font-bold inline-block text-center"
+								style="width: 1rem">{toBuy}</span
+							>
+							<button
+								type="button"
+								class="btn bg-gray-700 rounded-md"
+								class:bg-gray-400!={toBuy >= product.stock}
+								disabled={toBuy >= product.stock}
+								on:click={() => ++toBuy}>+</button
+							>
+						</div>
+					{/if}
+					<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>
+					<div class="flex-grow" />
+				</form>
+			{/if}
 		</div>
 	</article>
 </Container>