66 lines
2.0 KiB
Svelte
66 lines
2.0 KiB
Svelte
<style lang="scss">
|
|
@import "../../style/molecules/house";
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import dayjs from 'dayjs'
|
|
// Components
|
|
import Image from '$components/atoms/Image.svelte'
|
|
import Icon from '$components/atoms/Icon.svelte'
|
|
|
|
export let url: string
|
|
export let photoId: string
|
|
export let photoAlt: string
|
|
export let title: string
|
|
export let index: string
|
|
export let ratio: number
|
|
export let date: string = undefined
|
|
export let city: string = undefined
|
|
export let location: string
|
|
</script>
|
|
|
|
<div class="house grid">
|
|
<div class="house__info">
|
|
<h2 class="title-image">
|
|
{title}
|
|
</h2>
|
|
<p class="info text-info">
|
|
{#if city}
|
|
<a href="https://www.openstreetmap.org/search?query={title}, {city} {location}" target="_blank" rel="noopener noreferrer">
|
|
<Icon class="icon" icon="map-pin" label="Map pin" /> {city}
|
|
</a>
|
|
<span class="sep">·</span>
|
|
{/if}
|
|
{#if date}
|
|
<time datetime={dayjs(date).format('YYYY-MM-DD')}>
|
|
{dayjs(date).format('MMMM YYYY')}
|
|
</time>
|
|
{/if}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="house__photo grid" class:not-landscape={ratio < 1.475}>
|
|
<a href={url} sveltekit:noscroll tabindex="0">
|
|
<figure class="house__image shadow-photo">
|
|
<Image
|
|
class="photo"
|
|
id={photoId}
|
|
sizeKey="photo-list"
|
|
sizes={{
|
|
small: { width: 500 },
|
|
medium: { width: 850 },
|
|
large: { width: 1280 },
|
|
}}
|
|
ratio={1.5}
|
|
alt={photoAlt}
|
|
/>
|
|
</figure>
|
|
</a>
|
|
<span class="house__index title-index"
|
|
class:has-one-start={index.startsWith('1')}
|
|
class:has-one-end={index.endsWith('1')}
|
|
>
|
|
{index}
|
|
</span>
|
|
</div>
|
|
</div> |