78 lines
1.8 KiB
Svelte
78 lines
1.8 KiB
Svelte
<style lang="scss" src="./PhotoCard.scss"></style>
|
|
|
|
<script lang="ts">
|
|
import Image from '$components/atoms/Image.svelte'
|
|
|
|
let {
|
|
id,
|
|
alt,
|
|
url,
|
|
title,
|
|
location,
|
|
city,
|
|
hovered = false,
|
|
lazy = true,
|
|
onhover,
|
|
}: {
|
|
id: string
|
|
alt: string
|
|
url?: string
|
|
title?: string
|
|
location?: any
|
|
city?: string
|
|
hovered?: boolean
|
|
lazy?: boolean
|
|
onhover?: any
|
|
} = $props()
|
|
|
|
const sizes = {
|
|
small: { width: 224 },
|
|
medium: { width: 464 },
|
|
large: { width: 864 },
|
|
}
|
|
</script>
|
|
|
|
{#snippet image()}
|
|
<Image
|
|
{id}
|
|
sizeKey="postcard"
|
|
{sizes}
|
|
ratio={1.5}
|
|
{alt}
|
|
{lazy}
|
|
/>
|
|
{/snippet}
|
|
|
|
<div
|
|
class="photo-card"
|
|
class:is-hovered={hovered}
|
|
onmouseenter={() => onhover(true)}
|
|
onfocus={() => onhover(true)}
|
|
onmouseout={() => onhover(false)}
|
|
onblur={() => onhover(false)}
|
|
role="presentation"
|
|
>
|
|
{#if url}
|
|
<div class="photo-card__content">
|
|
<a href={url} data-sveltekit-noscroll>
|
|
{@render image()}
|
|
|
|
{#if title && location}
|
|
<div class="photo-card__info">
|
|
<Image
|
|
id={location.country.flag.id}
|
|
sizeKey="square-small"
|
|
width={24}
|
|
height={24}
|
|
alt="Flag of {location.country.name}"
|
|
/>
|
|
<p>{title} - {city ? `${city}, ` : ''}{location.name}, {location.country.name}</p>
|
|
</div>
|
|
{/if}
|
|
</a>
|
|
</div>
|
|
{:else}
|
|
{@render image()}
|
|
{/if}
|
|
</div>
|