Isolate Homepage collage component and add hover effect on other photos

src/components/molecules/PhotoCard.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { createEventDispatcher } from 'svelte'
     import Image from '$components/atoms/Image.svelte'
 
     export let id: string
@@ -7,16 +8,25 @@
     export let title: string = undefined
     export let location: any = undefined
     export let city: string = undefined
+    export let hovered: boolean = false
 
-
+    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">
+<div class="photo-card"
+    class:is-inactive={hovered}
+    on:mouseenter={() => sendHover(true)}
+    on:focus={() => sendHover(true)}
+    on:mouseout={() => sendHover(false)}
+    on:blur={() => sendHover(false)}
+>
     {#if url}
         <a href={url}>
             <Image

src/components/organisms/Collage.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import PhotoCard from '$components/molecules/PhotoCard.svelte'
+
+    export let photos: any[] = []
+
+    let hovered: number = null
+</script>
+
+{#if photos}
+    <div class="collage">
+        {#each photos as { slug, title, image, location, city }, index}
+            <PhotoCard
+                id={image.id}
+                alt={title}
+                url="/{location.country.slug}/{location.slug}/{slug}"
+                title={title}
+                location={location}
+                city={city}
+                hovered={hovered !== null && hovered !== index}
+                on:hover={({ detail }) => hovered = detail ? index : null}
+            />
+        {/each}
+    </div>
+{/if}