Use House component

src/routes/[country]/[location]/index.svelte

@@ -11,10 +11,9 @@
     // Components
     import Metas from '$components/Metas.svelte'
     import PageTransition from '$components/PageTransition.svelte'
-    import Icon from '$components/atoms/Icon.svelte'
     import Button from '$components/atoms/Button.svelte'
     import IconEarth from '$components/atoms/IconEarth.svelte'
-    import Image from '$components/atoms/Image.svelte'
+    import House from '$components/molecules/House.svelte'
     import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
 
     export let location: any
@@ -271,38 +270,15 @@
     {#if photos.length}
         <section class="location-page__houses grid" bind:this={photosListEl}>
             {#each photos as { title, image: { id, title: alt }, slug, city, date_taken }, index}
-                <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}
-                            <time datetime={dayjs(date_taken).format('YYYY-MM-DD')}>
-                                {dayjs(date_taken).format('MMMM YYYY')}
-                            </time>
-                        </p>
-                    </div>
-                    <figure class="house__photo">
-                        <a href="/{params.country}/{params.location}/{slug}" sveltekit:noscroll tabindex="0">
-                            <Image
-                                id={id}
-                                sizeKey="photo-list"
-                                sizes={{
-                                    small: { width: 500 },
-                                    medium: { width: 850 },
-                                    large: { width: 1280 },
-                                }}
-                                ratio={1.5}
-                                alt="{alt}"
-                                class="photo shadow-photo"
-                            />
-                            <span class="house__index title-index">
-                                {(totalPhotos - index < 10) ? '0' : ''}{totalPhotos - index}
-                            </span>
-                        </a>
-                    </figure>
-                </div>
+                <House
+                    {title}
+                    photoId={id}
+                    photoAlt={alt}
+                    url="/{params.country}/{params.location}/{slug}"
+                    {city}
+                    date={date_taken}
+                    index={(totalPhotos - index < 10) ? '0' : ''}{totalPhotos - index}
+                />
             {/each}
         </section>