🔥 Filter locations from clicked continent on Locations

src/components/molecules/Location.svelte

@@ -10,11 +10,10 @@
     export let location: any
 
     const { settings: { limit_new }}: any = getContext('global')
-    const { name, slug, country, date_updated } = location
 
     // Location date limit
     const dateNowOffset = dayjs().subtract(limit_new, 'day')
-    const dateLocationUpdated = dayjs(date_updated)
+    const dateLocationUpdated = dayjs(location.date_updated)
     const isNew = dateLocationUpdated.isAfter(dateNowOffset)
 
     let locationEl: HTMLElement
@@ -51,19 +50,19 @@
 <div class="location" role="listitem" bind:this={locationEl}
     style="--offset-x: {$offset.x}px; --offset-y: {$offset.y}px; --rotate: {$offset.x * 0.125}deg"
 >
-    <a href="/{country.slug}/{slug}"
+    <a href="/{location.country.slug}/{location.slug}"
         on:mousemove={handleMouseMove}
         on:mouseleave={handleMouseLeave}
         sveltekit-noscroll
     >
-        <Image class="location__flag" id={country.flag.id} alt="Flag of {country.name}" width={32} height={32} />
+        <Image class="location__flag" id={location.country.flag.id} alt="Flag of {location.country.name}" width={32} height={32} />
         <div class="text">
             <dl>
                 <dt class="location__name">
-                    {name}
+                    {location.name}
                 </dt>
                 <dd class="location__country text-label">
-                    {country.name}
+                    {location.country.name}
                 </dd>
             </dl>
             {#if isNew}
@@ -73,10 +72,10 @@
     </a>
     {#if location.photos.length}
         <div class="location__photos">
-            {#each location.photos as photo, index}
+            {#each location.photos as { image }, index}
                 <Image
                     class={index === photoIndex ? 'is-visible' : null}
-                    id={photo.image.id} alt={photo.image.title}
+                    id={image.id} alt={image.title}
                     width={340} height={226} quality={70}
                 />
             {/each}

src/components/organisms/Locations.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
     import { getContext } from 'svelte'
+    import { flip } from 'svelte/animate'
+    import { quartOut } from 'svelte/easing'
+    import { send, receive } from '$animations/crossfade'
+    import { throttle } from '$utils/functions'
     // Components
     import Button from '$components/atoms/Button.svelte'
     import Location from '$components/molecules/Location.svelte'
@@ -7,6 +11,30 @@
     export let locations: any
 
     const { continents, settings: { explore_list }} = getContext('global')
+
+    // Continents filtering logic
+    let currentContinent: string = undefined
+    $: filteredLocations = locations.filter(({ country: { continent }}: any) => {
+        if (!currentContinent) {
+            // Show all locations by default
+            return true
+        } else {
+            // Location's continent matches the clicked continent
+            return continent.slug === currentContinent
+        }
+    })
+
+
+    /**
+     * Filter locations from continent
+     */
+    const filterLocation = throttle((continent: string) => {
+        if (continent !== currentContinent) {
+            currentContinent = continent
+        } else {
+            currentContinent = undefined
+        }
+    }, 700)
 </script>
 
 <div class="browse" id="locations">
@@ -16,17 +44,24 @@
 
     <ul class="browse__continents" role="navigation">
         {#each continents as { name, slug }}
-            <li>
-                <Button tag="button" text={name} class="button--small" />
+            <li class:is-disabled={currentContinent && currentContinent !== slug}>
+                <Button
+                    tag="button" text={name} class="button--small"
+                    on:click={() => filterLocation(slug)}
+                />
             </li>
         {/each}
     </ul>
 
-    <div class="browse__locations" role="list">
-        {#each locations as location}
-            <Location
-                location={location}
-            />
+    <ul class="browse__locations" role="list">
+        {#each filteredLocations as location (location)}
+            <li
+                animate:flip={{ duration: 1000, easing: quartOut }}
+                in:receive={{ key: location.slug }}
+                out:send={{ key: location.slug }}
+            >
+                <Location {location} />
+            </li>
         {/each}
-    </div>
+    </ul>
 </div>