File size: 3,210 Bytes
edb4af2 012a5bd edb4af2 ef1c12f 34660c6 012a5bd ef1c12f 34660c6 ef1c12f 012a5bd ef1c12f 34660c6 edb4af2 34660c6 edb4af2 34660c6 edb4af2 34660c6 edb4af2 |
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 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
<script lang="ts">
import Container from '$lib/components/Container.svelte';
import Masonry from '$lib/components/Masonry.svelte';
import Picture from '$lib/components/Picture.svelte';
import type { EshopPage } from '$lib/types/Page';
import type { PageData } from './$types';
export let data: PageData;
const pictures = data.pictures;
const pageData = data.pageData as EshopPage;
const { published, retired } = data;
</script>
<div class="h-full-without-banner w-full relative">
<Picture
picture={pictures.find((p) => p._id === pageData.pictures.background)}
sizes="100vw"
class="h-full w-full object-cover absolute top-0 bottom-0 left-0 right-0 bg-brunswick text-white"
style="z-index: -1"
/>
<Container noPadding class="h-full flex flex-col items-stretch md:items-start">
<div class="grow basis-0" />
<div style="flex-grow: 2" class="basis-0 text-center md:px-8 xl:px-0">
<h1 class="text-7xl text-white text-center md:text-left">Découvrez <br />nos ventes</h1>
<a href="#produits" class="btn mt-10 inline-block">cliquez ici</a>
</div>
</Container>
</div>
<Container class="mb-4">
<h2 class="text-4xl text-oxford my-4" id="produits">Produits à la vente</h2>
<Masonry>
{#each published as product}
<a href="/vente/{product._id}" class="product">
<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]}
sizes="(min-width: 1024px) 33vw, (min-width: 675px) 50vw, 100vw"
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">{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]}
sizes="(min-width: 1024px) 33vw, (min-width: 675px) 50vw, 100vw"
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}
<!-- In case there is only one product. We don't want a product to take full row in desktop mode -->
<div />
</Masonry>
</Container>
<style>
.product {
display: grid;
gap: 0.5rem;
grid-template-rows: auto auto;
}
:global(.product .picture) {
max-height: 24rem;
width: 100%;
object-fit: cover;
}
.product .name {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
</style>
|