51 lines
1.4 KiB
Svelte
51 lines
1.4 KiB
Svelte
<style lang="scss">
|
|
@import "../../style/molecules/poster";
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import { addToCart } from '$utils/functions/shop'
|
|
import { smoothScroll } from '$utils/stores'
|
|
// Components
|
|
import Button from '$components/atoms/Button.svelte'
|
|
import Image from '$components/atoms/Image.svelte'
|
|
|
|
export let product: any
|
|
export let location: { name: string, slug: string }
|
|
export let image: any
|
|
</script>
|
|
|
|
<div class="poster">
|
|
{#if image}
|
|
<a href="/shop/poster-{location.slug}" data-sveltekit-noscroll
|
|
on:click={() => $smoothScroll.scrollTo('#poster', { duration: 2 })}
|
|
>
|
|
<Image
|
|
id={image.id}
|
|
sizeKey="product"
|
|
sizes={{
|
|
small: { width: 326 },
|
|
medium: { width: 326 },
|
|
large: { width: 326 },
|
|
}}
|
|
ratio={1.5}
|
|
alt="Poster of {location.name}"
|
|
/>
|
|
</a>
|
|
{/if}
|
|
<div class="buttons">
|
|
<Button
|
|
size="xsmall"
|
|
url="/shop/poster-{location.slug}"
|
|
text="View"
|
|
on:click={() => $smoothScroll.scrollTo('#poster', { duration: 2 })}
|
|
/>
|
|
<Button
|
|
tag="button"
|
|
size="xsmall"
|
|
text="Add to cart"
|
|
color="pink"
|
|
on:click={() => addToCart(product)}
|
|
/>
|
|
</div>
|
|
</div>
|