Setup some components

src/components/atoms/Button.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    export let text: string
+    export let tag: string
+</script>
+
+{#if tag === 'button'}
+    <button class="{$$props.class}">
+        {text}
+    </button>
+{/if}

src/components/molecules/Location.svelte

@@ -1,3 +1,14 @@
 <script lang="ts">
-    export let location
+    export let location: any
+
+    const { name, slug, country, last_updated } = location
 </script>
+
+<div class="location" role="listitem">
+    <a href="/location/{country.slug}/{slug}" rel="prefetch" sveltekit-noscroll>
+        <img src="//api.housesof.localhost:8055/assets/{country.flag.id}" alt="Flag of {country.name}">
+        <h3 class="location__name">
+            {name}
+        </h3>
+    </a>
+</div>

src/components/organisms/Locations.svelte

@@ -1,9 +1,9 @@
-<script>
+<script lang="ts">
     // Components
     import Button from '$components/atoms/Button.svelte'
     import Location from '$components/molecules/Location.svelte'
 
-    export let locations
+    export let locations: any
 </script>
 
 <div class="browse">
@@ -13,12 +13,12 @@
 
     <ul class="browse__continents" id="continents">
         <li>
-            <Button type="button" text="All" class="button-outline" />
+            <Button tag="button" text="All" class="button-outline" />
         </li>
     </ul>
 
     <div class="browse__locations" id="locations_list" role="list">
-        {#each locations as location (location.id)}
+        {#each locations as location (location.slug)}
             <Location
                 location={location}
             />

src/routes/__layout.svelte

@@ -24,13 +24,21 @@
                     name
                     slug
                     country {
+                        name
+                        slug
+                        flag {
                             id
                         }
                     }
+                    date_updated
+                }
 
                 country {
                     name
                     slug
+                    flag {
+                        id
+                    }
                 }
 
                 continent {

src/routes/index.svelte

@@ -5,7 +5,6 @@
     import Locations from '$components/organisms/Locations.svelte'
 
     const globalData: any = getContext('global')
-    console.log(globalData)
 </script>
 
 <Metas

src/routes/location/[country]/[location].svelte

@@ -0,0 +1 @@
+<h1>Hello location</h1>