Create Photos page with filter bar

src/routes/photos.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+    import { getContext } from 'svelte'
+    import { page } from '$app/stores'
+    // Components
+    import Metas from '$components/Metas.svelte'
+    import Button from '$components/atoms/Button.svelte'
+    import BoxCTA from '$components/atoms/BoxCTA.svelte'
+    import PhotoCard from '$components/molecules/PhotoCard.svelte'
+    import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
+    import Locations from '$components/organisms/Locations.svelte'
+    import Shop from '$components/organisms/Shop.svelte'
+    import Newsletter from '$components/organisms/Newsletter.svelte'
+
+    export let photos: any
+
+    const { settings, location, count }: any = getContext('global')
+    const { path } = $page
+</script>
+
+<Metas
+    title="Photos"
+    description=""
+    image=""
+/>
+
+<main class="photos">
+    <section class="photos__intro">
+        <h1 class="title-huge">Houses</h1>
+        <p class="discover">
+            Discover <strong>{count.photos} homes</strong><br>
+            from <strong>{count.locations} cities</strong>
+            of <strong>{count.countries} countries</strong>
+        </p>
+
+        <div class="filter">
+            <span class="text-label filter__label">Filter photos</span>
+
+            <div class="filter__bar">
+                <ul>
+                    <li>
+                        <div class="select">
+                            <img src="/images/icons/earth.svg" alt="Earth">
+                            <span>Worldwide</span>
+                            <select name="location" id="filter_location">
+                                <option value="worldwide">Worldwide</option>
+                            </select>
+                        </div>
+                    </li>
+                    <li>
+                        <div class="select">
+                            <img src="/images/icons/sort.svg" alt="Sort">
+                            <span>Worldwide</span>
+                            <select name="location" id="filter_location">
+                                <option value="worldwide">Worldwide</option>
+                            </select>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+
+            <div class="filter__actions">
+                <a href="#">Reset</a>
+                <button class="shuffle">
+                    <img src="/images/icons/shuffle.svg" alt="">
+                </button>
+            </div>
+        </div>
+    </section>
+</main>
+
+
+<script context="module" lang="ts">
+    import { fetchAPI } from '$utils/api'
+
+    export async function load ({ page, session, fetch, context }) {
+        const res = await fetchAPI(`
+            query {
+                photo (limit: 11, sort: ["-date_created"]) {
+                    image {
+                        id
+                        title
+                    }
+                }
+            }
+        `)
+
+        const { data } = res
+
+        return {
+            props: {
+                photos: data.photo,
+            }
+        }
+    }
+</script>