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">
-        <li>
-            <Button tag="button" text="All" class="button-outline" />
-            <Button tag="button" text="Europe" class="button-outline" />
-        </li>
+    <ul class="browse__continents" role="navigation">
+        {#each filteredContinents as { name, slug }}
+            <li>
+                <Button tag="button" text={name} class="button--small" />
+            </li>
+        {/each}
     </ul>
 
-    <div class="browse__locations" id="locations_list" role="list">
-        {#each locations as location, index}
+    <div class="browse__locations" role="list">
+        {#each locations as location}
             <Location
                 location={location}
-                index={index}
             />
         {/each}
     </div>