Photo in list component

src/components/Photo.svelte

@@ -1,23 +1,24 @@
 <script>
-    import { slide } from 'svelte/transition'
+    // Svelte
+    import { fade, slide } from 'svelte/transition'
+    import { site, currentLocation } from '../store'
+
+    // Dependencies
     import dayjs from 'dayjs'
     import advancedFormat from 'dayjs/plugin/advancedFormat'
-    import * as fn from '../functions'
+    dayjs.extend(advancedFormat)
 
-    export let photo
     export let index
-    export let location
+    export let photo
+    const location = $currentLocation.location
 
     // Manipulate data
     const thumbnail = photo.image.data.thumbnails.find(t => t.url.includes('key=large'))
     index = (index < 10 ? '0' : null) + index
-
-    // Format the date
-    dayjs.extend(advancedFormat)
-    const date = dayjs(photo.created_on).format('MMM Do, YYYY')
 </script>
 
-<div class="card" in:slide out:slide>
+<div class="card" in:fade out:fade>
+    <a href="/viewer/{location.country.slug}/{location.slug}/{photo.slug}">
         <div class="card-image">
             <figure class="image is-4by3">
                 <img src="{thumbnail.url}" alt="{photo.name}, {location.name}, {location.country.name}" width="{thumbnail.width}" height="{thumbnail.height}">
@@ -25,12 +26,15 @@
         </div>
 
         <div class="card-content">
-        <h4 class="title is-4">{photo.name}</h4>
+            <p class="is-size-5"><strong></strong>
+                <strong>{photo.name}</strong>
+            </p>
             <p>{location.name}, {location.country.name}</p>
         </div>
 
-    <footer class="card-footer">
-        <span class="card-footer-item">{date}</span>
+        <footer class="card-footer has-text-grey-light">
+            <span class="card-footer-item">{dayjs(photo.date).format('MMM Do, YYYY')}</span>
             <span class="card-footer-item">#{index}</span>
         </footer>
+    </a>
 </div>