Add link to photo on Homepage collage

src/components/molecules/PhotoCard.svelte

@@ -3,17 +3,31 @@
 
     export let id: string
     export let alt: string
+    export let url: string = undefined
+
+    const sizes = {
+        small: { width: 224 },
+        medium: { width: 464 },
+        large: { width: 864 },
+    }
 </script>
 
 <div class="photo-card">
-    <Image
+    {#if url}
-        id={id}
+    <a href={url}>
-        sizes={{
+        <Image
-            small: { width: 224 },
+            id={id}
-            medium: { width: 464 },
+            {sizes}
-            large: { width: 864 },
+            ratio={1.5}
-        }}
+            alt={alt}
-        ratio={1.5}
+        />
-        alt={alt}
+    </a>
-    />
+    {:else}
+        <Image
+            id={id}
+            {sizes}
+            ratio={1.5}
+            alt={alt}
+        />
+    {/if}
 </div>

src/routes/index.svelte

@@ -40,8 +40,12 @@
 
     <section class="homepage__photos">
         <div class="homepage__collage">
-            {#each photos as { image: { id, title } }}
+            {#each photos as { slug, location: { slug: locationSlug, country }, image: { id, title } }}
-                <PhotoCard id={id} alt={title} />
+                <PhotoCard
+                    id={id}
+                    alt={title}
+                    url="/{country.slug}/{locationSlug}/{slug}"
+                />
             {/each}
         </div>
     </section>
@@ -96,6 +100,11 @@
         const res = await fetchAPI(`
             query {
                 photo (limit: 11, sort: ["-date_created"]) {
+                    slug
+                    location {
+                        slug
+                        country { slug }
+                    }
                     image {
                         id
                         title