refactor: migrate to Svelte 5

use runes ($props, $state, $derived, $effect, etc)

apps/website/src/components/molecules/PhotoCard/PhotoCard.svelte

@@ -3,46 +3,62 @@
 </style>
 
 <script lang="ts">
-    import { createEventDispatcher } from 'svelte'
     import Image from '$components/atoms/Image.svelte'
 
-    export let id: string
-    export let alt: string
-    export let url: string = undefined
-    export let title: string = undefined
-    export let location: any = undefined
-    export let city: string = undefined
-    export let hovered = false
-    export let lazy = true
+    let {
+        id,
+        alt,
+        url,
+        title,
+        location,
+        city,
+        hovered = false,
+        lazy = true,
+        onhover,
+    }: {
+        id: string
+        alt: string
+        url?: string
+        title?: string
+        location?: any
+        city?: string
+        hovered?: boolean
+        lazy?: boolean
+        onhover?: any
+    } = $props()
 
-    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"
+{#snippet image()}
+    <Image
+        {id}
+        sizeKey="postcard"
+        {sizes}
+        ratio={1.5}
+        {alt}
+        {lazy}
+    />
+{/snippet}
+
+<div
+    class="photo-card"
     class:is-hovered={hovered}
-    on:mouseenter={() => sendHover(true)}
-    on:focus={() => sendHover(true)}
-    on:mouseout={() => sendHover(false)}
-    on:blur={() => sendHover(false)}
+    onmouseenter={() => onhover(true)}
+    onfocus={() => onhover(true)}
+    onmouseout={() => onhover(false)}
+    onblur={() => onhover(false)}
+    role="presentation"
 >
     {#if url}
         <div class="photo-card__content">
             <a href={url} data-sveltekit-noscroll>
-                <Image
-                    {id}
-                    sizeKey="postcard"
-                    {sizes}
-                    ratio={1.5}
-                    {alt}
-                    {lazy}
-                />
+                {@render image()}
+
                 {#if title && location}
                     <div class="photo-card__info">
                         <Image
@@ -58,13 +74,6 @@
             </a>
         </div>
     {:else}
-        <Image
-            {id}
-            sizeKey="postcard"
-            {sizes}
-            ratio={1.5}
-            {alt}
-            {lazy}
-        />
+        {@render image()}
     {/if}
 </div>