Edit browse locations section

Create badge atom,

src/components/atoms/Badge.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+    export let text: string
+    export let size: string = 'small'
+</script>
+
+<div class="badge badge--{size}">
+    <span>{text}</span>
+</div>

src/components/molecules/Location.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
     // Components
     import Image from '$components/atoms/Image.svelte'
+    import Badge from '$components/atoms/Badge.svelte'
 
     export let location: any
+    export let index: number
 
     const { name, slug, country, last_updated } = location
 </script>
@@ -13,6 +15,9 @@
         <h3 class="location__name">
             {name}
         </h3>
-        <span class="text-label">{country.name}</span>
+        <span class="text-label location__country">{country.name}</span>
+        {#if index < 2}
+            <Badge text="New" />
+        {/if}
     </a>
 </div>

src/components/organisms/Locations.svelte

@@ -14,13 +14,15 @@
     <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>
 
     <div class="browse__locations" id="locations_list" role="list">
-        {#each locations as location (location.slug)}
+        {#each locations as location, index}
             <Location
                 location={location}
+                index={index}
             />
         {/each}
     </div>

src/style/atoms/_badge.scss

@@ -0,0 +1,22 @@
+.badge {
+    display: flex;
+    align-items: center;
+    margin: 0 auto;
+    padding: 0 6px;
+    background-color: $color-secondary-light;
+    border-radius: 100vh;
+    text-transform: uppercase;
+    color: $color-primary-darker;
+    font-weight: 500;
+    letter-spacing: 1px;
+    line-height: 1;
+    min-height: 16px;
+    margin-top: 20px;
+
+    // Small size
+    &--small {
+        span {
+            font-size: rem(7px);
+        }
+    }
+}

src/style/molecules/_location.scss

@@ -1,7 +1,16 @@
 .location {
     text-align: center;
+
+    & > * {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
     // Flag
     img {
+        display: block;
+        margin: 0 auto;
         border-radius: 100%;
     }
     // Link
@@ -17,7 +26,8 @@
         font-weight: 300;
         line-height: 1.2;
     }
-    span {
+    &__country {
         color: $color-tertiary;
     }
+
 }

src/style/organisms/_locations.scss

@@ -1,9 +1,21 @@
 .browse {
 
+    // Description
     &__description {
         text-align: center;
+        margin-bottom: 56px;
     }
 
+    // Continents
+    &__continents {
+        text-align: center;
+
+        button {
+            margin: 0 8px;
+        }
+    }
+
+    // Locations
     &__locations {
         display: flex;
         flex-flow: row wrap;

src/style/style.scss

@@ -24,6 +24,7 @@
 // Atomic Design System
 // Atoms
 @import "atoms/button";
+@import "atoms/badge";
 
 // Molecules
 @import "molecules/photo-card";