Félix Péault
e27e8a16db
- Imports/exports always at top - Sapper template not needing a div to execute - NPM packages updates: @rollup/plugin-commonjs 11.1.0 has a bug about import/exports
49 lines
1.4 KiB
Svelte
49 lines
1.4 KiB
Svelte
<script>
|
|
import { currentLocation } from 'utils/store'
|
|
// Components
|
|
import IconGlobe from 'atoms/IconGlobe'
|
|
|
|
// Props
|
|
export let type = ''
|
|
export let radius = 32
|
|
|
|
// Variables
|
|
let location
|
|
let locationName
|
|
let locationOf
|
|
|
|
$: {
|
|
location = $currentLocation
|
|
locationName = location ? location.name : 'World'
|
|
locationOf = location ? 'Of' : 'Of The'
|
|
}
|
|
</script>
|
|
|
|
<div class="switcher {type}">
|
|
<div class="switcher__text" class:empty={!location}>
|
|
<a href="/" sapper-noscroll>
|
|
{#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}
|
|
</a>
|
|
</div>
|
|
|
|
<div class="button-control button-control--dashed switcher__icon">
|
|
<a href="/choose" aria-label="Change the location" sapper-noscroll>
|
|
<IconGlobe
|
|
color={type.includes('side') ? '#333' : '#fff'}
|
|
width={type.includes('side') ? 18 : 24}
|
|
/>
|
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
|
|
<circle cx="50%" cy="50%" r="{type.includes('side') ? 24 : radius}px"></circle>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|