Use House component

src/components/molecules/House.svelte

@@ -0,0 +1,50 @@
+<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 date: string = undefined
+    export let city: string = undefined
+</script>
+
+<div class="house grid">
+    <div class="house__info">
+        <h2 class="title-image">
+            {title}
+        </h2>
+        <p class="info text-info">
+            {#if city}<Icon class="icon" icon="map-pin" label="Map pin" /> {city} <span class="sep">·</span>{/if}
+            {#if date}
+                <time datetime={dayjs(date).format('YYYY-MM-DD')}>
+                    {dayjs(date).format('MMMM YYYY')}
+                </time>
+            {/if}
+        </p>
+    </div>
+
+    <figure class="house__photo">
+        <a href={url} sveltekit:noscroll tabindex="0">
+            <Image
+                id={photoId}
+                sizeKey="photo-list"
+                sizes={{
+                    small: { width: 500 },
+                    medium: { width: 850 },
+                    large: { width: 1280 },
+                }}
+                ratio={1.5}
+                alt={photoAlt}
+                class="photo shadow-photo"
+            />
+            <span class="house__index title-index">
+                {index}
+            </span>
+        </a>
+    </figure>
+</div>