Files
housesof/src/components/molecules/Poster.svelte
Félix Péault 2e05f00b68 Add link to Poster component and make a better hover
Buttons are now under the image, creating a parallax scale effect
2021-11-05 12:57:15 +01:00

38 lines
988 B
Svelte

<script lang="ts">
import Button from '$components/atoms/Button.svelte'
import Image from '$components/atoms/Image.svelte'
export let location: { name: string, slug: string }
export let image: any
</script>
<div class="poster">
{#if image}
<a href="/shop/poster-{location.slug}">
<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"
/>
<Button
type="button"
text="Add to cart"
color="pinklight"
size="xsmall"
/>
</div>
</div>