WIP React > Svelte

Put most of the developed design into Svelte

src/molecules/Photo.svelte

@@ -0,0 +1,71 @@
+<script>
+    // Svelte
+    import { site, currentLocation } from '../store'
+
+    // Dependencies
+    import dayjs from 'dayjs'
+    import advancedFormat from 'dayjs/plugin/advancedFormat'
+    dayjs.extend(advancedFormat)
+
+    // Props
+    export let index
+    export let photo
+
+    // Shortcut current location
+    let location
+    $: location = $currentLocation.location
+
+    // Manipulate data
+    const thumbnail = photo.image.data.thumbnails.find(thumb => thumb.url.includes('key=large'))
+</script>
+
+<div class="photo">
+    <div class="photo__location wrap">
+        <div class="wrapper">
+            <h2 class="title-location">{photo.name.replace(', ', ',\n')}</h2>
+            <p class="style-caps">{location.region}, {location.country.name}</p>
+        </div>
+    </div>
+
+    <div class="photo__image wrap">
+        <div class="align">
+            <a href="/viewer/{location.country.slug}/{location.slug}/{photo.slug}">
+                <div class="photo__image--img">
+                    <img
+                        src={thumbnail.url}
+                        width={thumbnail.width} height={thumbnail.height}
+                        alt="{photo.name}, {location.region}, {location.country.name}"
+                    >
+                </div>
+                <time class="photo__image--date">{dayjs(photo.date).format('MMM Do, YYYY')}</time>
+                <span class="photo__image--number">{(index < 10 ? '0': '') + index}</span>
+            </a>
+        </div>
+    </div>
+</div>
+
+<!-- <div class="card">
+    <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}
+                >
+            </figure>
+        </div>
+
+        <div class="card-content">
+            <p class="is-size-5"><strong></strong>
+                <strong>{photo.name}</strong>
+            </p>
+            <p>{location.name}, {location.country.name}</p>
+        </div>
+
+        <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 < 10 ? '0' : '') + index}</span>
+        </footer>
+    </a>
+</div> -->