70 lines
2.0 KiB
Svelte
70 lines
2.0 KiB
Svelte
<style lang="scss">
|
|
@import "../../style/molecules/photo-card";
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import { createEventDispatcher } from 'svelte'
|
|
import Image from '$components/atoms/Image.svelte'
|
|
|
|
export let id: string
|
|
export let alt: string
|
|
export let url: string = undefined
|
|
export let title: string = undefined
|
|
export let location: any = undefined
|
|
export let city: string = undefined
|
|
export let hovered: boolean = false
|
|
export let lazy: boolean = true
|
|
|
|
const dispatch = createEventDispatcher()
|
|
const sizes = {
|
|
small: { width: 224 },
|
|
medium: { width: 464 },
|
|
large: { width: 864 },
|
|
}
|
|
|
|
const sendHover = (hover: boolean) => dispatch('hover', hover)
|
|
</script>
|
|
|
|
<div class="photo-card"
|
|
class:is-hovered={hovered}
|
|
on:mouseenter={() => sendHover(true)}
|
|
on:focus={() => sendHover(true)}
|
|
on:mouseout={() => sendHover(false)}
|
|
on:blur={() => sendHover(false)}
|
|
>
|
|
{#if url}
|
|
<div class="photo-card__content">
|
|
<a href={url} data-sveltekit-noscroll>
|
|
<Image
|
|
{id}
|
|
sizeKey="postcard"
|
|
{sizes}
|
|
ratio={1.5}
|
|
{alt}
|
|
{lazy}
|
|
/>
|
|
{#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}
|
|
<Image
|
|
{id}
|
|
sizeKey="postcard"
|
|
{sizes}
|
|
ratio={1.5}
|
|
{alt}
|
|
{lazy}
|
|
/>
|
|
{/if}
|
|
</div> |