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>

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">
+                <House
-                    <div class="house__info">
-                        <h2 class="title-image">
                     {title}
-                        </h2>
+                    photoId={id}
-                        <p class="info text-info">
+                    photoAlt={alt}
-                            {#if city}<Icon class="icon" icon="map-pin" label="Map pin" /> {city} <span class="sep">·</span>{/if}
+                    url="/{params.country}/{params.location}/{slug}"
-                            <time datetime={dayjs(date_taken).format('YYYY-MM-DD')}>
+                    {city}
-                                {dayjs(date_taken).format('MMMM YYYY')}
+                    date={date_taken}
-                            </time>
+                    index={(totalPhotos - index < 10) ? '0' : ''}{totalPhotos - index}
-                        </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>
             {/each}
         </section>
 

src/style/molecules/_house.scss

@@ -81,8 +81,9 @@
             position: relative;
             z-index: 3;
             border-radius: 0;
+            background: $color-primary;
 
-            @include bp (md) {
+            @include bp (sm) {
                 border-radius: 8px;
             }
         }
@@ -100,7 +101,7 @@
         @media (hover: hover) {
             a:hover {
                 img {
-                    opacity: 0.6;
+                    opacity: 0.8;
                     transform: scale3d(1.03, 1.03, 1.03) !important;
                     transition-duration: 1.2s;
                 }

src/style/style.scss

@@ -55,6 +55,7 @@
 @import "molecules/switcher";
 @import "molecules/heading";
 @import "molecules/list-cta";
+@import "molecules/house";
 @import "molecules/issue";
 @import "molecules/newsletter-form";
 @import "molecules/poster";
@@ -65,7 +66,6 @@
 // Organisms
 @import "organisms/collage";
 @import "organisms/locations";
-@import "organisms/house";
 @import "organisms/newsletter";
 @import "organisms/carousel";
 @import "organisms/shop";