39 lines
1.2 KiB
Svelte
39 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import { getContext } from 'svelte'
|
|
// Components
|
|
import Button from '$components/atoms/Button.svelte'
|
|
import Image from '$components/atoms/Image.svelte'
|
|
|
|
const { locations, shop } = getContext('global')
|
|
|
|
const locationsWithPoster = locations
|
|
.filter((loc: any) => loc.has_poster)
|
|
.map((loc: any) => loc.name)
|
|
</script>
|
|
|
|
<div class="shop shadow-box-dark">
|
|
<div class="content">
|
|
<div class="shop__image">
|
|
<Image
|
|
id={shop.module_image.id}
|
|
sizeKey="square"
|
|
sizes={{
|
|
small: { width: 400, height: 400 },
|
|
large: { width: 800, height: 800 },
|
|
}}
|
|
alt={shop.module_image.title}
|
|
/>
|
|
</div>
|
|
|
|
<div class="shop__content">
|
|
<h3 class="title-medium">{shop.module_title}</h3>
|
|
<p class="text-small">{shop.module_text}</p>
|
|
{#if shop.enabled}
|
|
<Button url="/shop" text="Shop" color="pink" />
|
|
{/if}
|
|
<p class="detail">
|
|
Posters available for {locationsWithPoster.join(', ').replace(/,(?!.*,)/gmi, ' and')}.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div> |