Display continents filters buttons with countries only

Hide the ones with no linked country

src/components/organisms/Locations.svelte

@@ -1,9 +1,15 @@
 <script lang="ts">
+    import { getContext } from 'svelte'
     // Components
     import Button from '$components/atoms/Button.svelte'
     import Location from '$components/molecules/Location.svelte'
 
     export let locations: any
+
+    const { continent } = getContext('global')
+
+    // Filter continents with linked countries
+    const filteredContinents = continent.filter((cont: any) => cont.countries.length)
 </script>
 
 <div class="browse">
@@ -11,18 +17,18 @@
         <p>Browse all the cities and countries</p>
     </div>
 
-    <ul class="browse__continents" id="continents">
+    <ul class="browse__continents" role="navigation">
-        <li>
+        {#each filteredContinents as { name, slug }}
-            <Button tag="button" text="All" class="button-outline" />
+            <li>
-            <Button tag="button" text="Europe" class="button-outline" />
+                <Button tag="button" text={name} class="button--small" />
-        </li>
+            </li>
+        {/each}
     </ul>
 
-    <div class="browse__locations" id="locations_list" role="list">
+    <div class="browse__locations" role="list">
-        {#each locations as location, index}
+        {#each locations as location}
             <Location
                 location={location}
-                index={index}
             />
         {/each}
     </div>

src/routes/__layout.svelte

@@ -50,11 +50,17 @@
                     flag {
                         id
                     }
+                    locations {
+                        slug
+                    }
                 }
 
                 continent {
                     name
                     slug
+                    countries {
+                        slug
+                    }
                 }
 
                 settings {

src/style/organisms/_locations.scss

@@ -1,5 +1,5 @@
 .browse {
-    margin-top: 96px;
+    margin: 96px 0 128px;
 
     // Description
     &__description {
@@ -17,9 +17,12 @@
 
     // Continents
     &__continents {
+        display: flex;
+        justify-content: center;
         text-align: center;
 
-        button {
+        li {
+            display: block;
             margin: 0 8px;
         }
     }
@@ -28,7 +31,7 @@
     &__locations {
         width: 70%;
         max-width: 1200px;
-        margin: 88px auto 80px;
+        margin: 88px auto 0;
         padding: 0 32px;
 
         @include bp (mob-lg) {
@@ -43,7 +46,7 @@
             display: flex;
             flex-flow: row wrap;
             width: 100%;
-            margin: 104px auto 80px;
+            margin-top: 104px;
         }
 
         .location {