WIP React > Svelte

Put most of the developed design into Svelte

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