WIP React > Svelte

Put most of the developed design into Svelte

src/molecules/Footer.svelte

@@ -0,0 +1,30 @@
+<script>
+	// Svelte
+	import { site, currentLocation } from '../store'
+
+	// Components
+	import Switcher from '../molecules/Switcher'
+</script>
+
+<footer class="footer">
+	<div class="wrap">
+		<div class="footer__left">
+			<Switcher radius="30" />
+		</div>
+
+		<div class="footer__right">
+			<div class="instagram">
+				<a href="https://instagram.com/{$site.instagram}" target="_blank">
+					<img src="/img/icons/instagram.svg" alt="Instagram">
+					<span>Instagram</span>
+				</a>
+			</div>
+			<div class="cetrucflotte">
+				<span>A project by</span>
+				<a href="https://cetrucflotte.com" target="_blank">
+					<img src="/img/logo-ctf.svg" alt="Cetrucflotte logo's">
+				</a>
+			</div>
+		</div>
+	</div>
+</footer>

src/molecules/InteractiveGlobe.svelte

@@ -0,0 +1,5 @@
+<div class="globe">
+    <div class="wrap">
+        <img src="/img/globe.png" alt="">
+    </div>
+</div>

src/molecules/Location.svelte

@@ -0,0 +1,13 @@
+<script>
+    export let name
+    export let slug
+    export let country
+</script>
+
+<div class="location" data-groups='["{country.continent.id}"]'>
+    <a href="/location/{country.slug}/{slug}">
+        <img src={country.flag.full_url} alt={'Flag of ' + country.name} />
+        <h3 class="location__city">{name}</h3>
+        <p class="location__country style-caps">{country.name}</p>
+    </a>
+</div>

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> -->

src/molecules/Switcher.svelte

@@ -0,0 +1,55 @@
+<script>
+    import { currentLocation } from '../store'
+
+    // Components
+    import IconGlobe from '../atoms/iconGlobe'
+
+    // Props
+    export let type = ''
+    export let radius = 32
+
+    // Location variables
+    let location
+    let locationName
+    let locationOf
+
+    $: {
+        location = $currentLocation
+        locationName = location ? location.location.name : 'World'
+        locationOf = location ? 'Of' : 'Of The'
+    }
+</script>
+
+<div class="switcher {type}">
+    <a href="/choose">
+        <div class="switcher__text" class:empty={!location}>
+            {#if !location}
+            <span class="top">Houses</span>
+            <span class="bottom">
+                <em class="same-line">{locationOf}</em> {locationName}
+            </span>
+            {:else}
+            <span class="top">Houses <em>{locationOf}</em></span>
+            <span class="bottom">{locationName}</span>
+            {/if}
+        </div>
+
+        <div class="button-control button-control--dashed switcher__icon">
+            <IconGlobe color="#fff" width="24" />
+            <svg>
+                <circle cx="50%" cy="50%" r="{type.includes('side') ? 24 : radius}px"></circle>
+            </svg>
+        </div>
+    </a>
+</div>
+
+<!-- <div class="switcher switcher--side">
+    <p class="switcher__location">
+        <a href="/">Houses <span class="caps">{locationOf}</span></a> <br>
+        <strong class="name">{locationName}</strong>
+    </p>
+
+    <a href="/choose" class="switcher__icon icon is-medium has-text-danger">
+        <i class="fas fa-exchange-alt fa-lg"></i>
+    </a>
+</div> -->