Add continents filtering on Locations listing

src/components/Locations.svelte

@@ -1,18 +1,66 @@
 <script>
-    import { locations } from '../store'
+    import { continents, locations } from '../store'
+    import { cubicInOut } from 'svelte/easing'
+
+    // Define continents to be show
+    let continentsShow = []
+    $continents.forEach((c, i) => {
+        continentsShow[i] = {
+            id: c.id,
+            show: c.countries ? true : false
+        }
+    })
+
+    // Define locations to show
+    let filteredLocations = Array.from($locations)
+    filteredLocations.forEach(loc => loc.show = true)
+    $: visibleLocations = filteredLocations
+
+    // On click on continents
+    function toggleCountries (continent, i) {
+        // Toggle the continent
+        continentsShow[i].show = !continentsShow[i].show
+
+        // Filter locations
+        filteredLocations.map(l => l.country.continent.id === continent.id ? l.show = !l.show : null)
+        visibleLocations = filteredLocations
+    }
+
+    // Transitions
+    const transition = (node, { duration }) => {
+		return {
+			duration,
+			css: t => {
+				const eased = cubicInOut(t)
+				return `transform: scale(${eased});`
+			}
+		}
+	}
 </script>
 
-<div class="columns">
+<div class="buttons has-addons is-centered">
-    {#each $locations as location}
+{#each $continents as continent, i}
-    <div class="column is-one-third">
+    {#if continent.countries}
+    <button class="button is-rounded is-danger" class:is-outlined={!continentsShow[i].show} on:click="{toggleCountries(continent, i)}">
+        {continent.name}
+    </button>
+    {/if}
+{/each}
+</div>
+
+<div class="columns" id="locations_list">
+    {#each visibleLocations as location}
+    {#if location.show}
+    <div class="column is-one-third" in:transition="{{duration: 400}}" out:transition="{{duration: 400}}">
         <div class="card">
             <div class="card-content">
                 <a class="media" href="/location/{location.country.slug}/{location.slug}">
                     <figure class="media-left">
                         <span class="icon is-medium has-text-danger">
-                            <i class="fas fa-map-marker-alt fa-lg"></i>
+                            <img src="{location.country.flag.full_url}" alt="{location.country.flag.full_url}" width="32" height="32">
                         </span>
                     </figure>
+
                     <div class="media-content">
                         <span class="title is-5">{location.name}</span><br>
                         {location.region}, {location.country.name}<br>
@@ -24,5 +72,6 @@
             </div>
         </div>
     </div>
+    {/if}
     {/each}
 </div>