From ce25f9314b29ccac6e583efef2ddf84f17b4d5cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Tue, 7 Jun 2022 14:55:05 +0200
Subject: [PATCH] Add global error page

---
 src/routes/__error.svelte          | 88 ++++++++++++++++++++++++++++++
 src/routes/index.svelte            |  2 +-
 src/style/molecules/_list-cta.scss | 14 +++++
 src/style/pages/_error.scss        | 26 +++++++++
 src/style/pages/_homepage.scss     | 13 +----
 src/style/style.scss               |  2 +
 6 files changed, 133 insertions(+), 12 deletions(-)
 create mode 100644 src/routes/__error.svelte
 create mode 100644 src/style/molecules/_list-cta.scss
 create mode 100644 src/style/pages/_error.scss

diff --git a/src/routes/__error.svelte b/src/routes/__error.svelte
new file mode 100644
index 0000000..8f8c9a8
--- /dev/null
+++ b/src/routes/__error.svelte
@@ -0,0 +1,88 @@
+<script lang="ts">
+    import { getContext } from 'svelte'
+    // Components
+    import { page } from '$app/stores'
+    import Metas from '$components/Metas.svelte'
+    import PageTransition from '$components/PageTransition.svelte'
+    import BoxCTA from '$components/atoms/BoxCTA.svelte'
+    import Heading from '$components/molecules/Heading.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 status: number
+
+    const { locations }: any = getContext('global')
+    const errors = {
+        404: {
+            title: 'Page not found',
+            message: 'You seem lost…',
+        },
+        500: {
+            title: 'Error',
+            message: 'Server error…',
+        },
+    }
+    const defaultMessage = 'You are welcome to explore our locations or shop some products'
+</script>
+
+<Metas
+    title="{errors[status].title} – Houses Of"
+/>
+
+<PageTransition name="page-error">
+    <div class="page-error__top">
+        <Heading
+            text="{errors[status].message} {defaultMessage}"
+        />
+
+        <div class="list-cta">
+            <BoxCTA
+                url="{$page.url.pathname}#locations"
+                icon="globe"
+                label="Discover locations"
+                alt="Globe"
+            />
+            <BoxCTA
+                url="/photos"
+                icon="photos"
+                label="Browse all photos"
+                alt="Photos"
+            />
+            <BoxCTA
+                url="/shop"
+                icon="bag"
+                label="Shop our products"
+                alt="Shopping bag"
+            />
+        </div>
+    </div>
+
+    <InteractiveGlobe />
+    <Locations {locations} />
+
+    <div class="grid-modules">
+        <div class="container grid">
+            <div class="wrap">
+                <Shop />
+                <Newsletter />
+            </div>
+        </div>
+    </div>
+</PageTransition>
+
+
+<script context="module" lang="ts">
+    import type { LoadEvent, LoadOutput } from '@sveltejs/kit'
+
+    export async function load ({ fetch, status }: LoadEvent): Promise<LoadOutput> {
+        console.log(status)
+
+        return {
+            props: {
+                status,
+            },
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 3f31ed5..02f954e 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -104,7 +104,7 @@
     <div class="homepage__ctas" id="ctas">
         <DiscoverText />
 
-        <div class="cards">
+        <div class="list-cta">
             <BoxCTA
                 url="{$page.url.pathname}#locations"
                 icon="globe"
diff --git a/src/style/molecules/_list-cta.scss b/src/style/molecules/_list-cta.scss
new file mode 100644
index 0000000..946a6a5
--- /dev/null
+++ b/src/style/molecules/_list-cta.scss
@@ -0,0 +1,14 @@
+.list-cta {
+    @include bp (sm) {
+        display: flex;
+        justify-content: center;
+    }
+
+    & > * {
+        margin: 20px auto 0;
+
+        @include bp (sm) {
+            margin: 0 16px;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/style/pages/_error.scss b/src/style/pages/_error.scss
new file mode 100644
index 0000000..fd38cfd
--- /dev/null
+++ b/src/style/pages/_error.scss
@@ -0,0 +1,26 @@
+.page-error {
+    // Top
+    &__top {
+        margin-bottom: 72px;
+
+        @include bp (sm) {
+            margin-bottom: 120px;
+        }
+
+        // Heading
+        .heading {
+            padding: 0 24px;
+            margin-bottom: 40px;
+
+            @include bp (sm) {
+                margin-bottom: 72px;
+            }
+
+            p {
+                @include bp (sm, max) {
+                    max-width: 480px;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/style/pages/_homepage.scss b/src/style/pages/_homepage.scss
index 56b3306..b56964b 100644
--- a/src/style/pages/_homepage.scss
+++ b/src/style/pages/_homepage.scss
@@ -116,22 +116,13 @@
             margin-bottom: 160px;
         }
 
-        .cards {
-            justify-content: center;
+        // List
+        .list-cta {
             margin-top: 48px;
 
             @include bp (sm) {
-                display: flex;
                 margin-top: 72px;
             }
-
-            & > * {
-                margin: 20px auto 0;
-
-                @include bp (sm) {
-                    margin: 0 16px;
-                }
-            }
         }
     }
 
diff --git a/src/style/style.scss b/src/style/style.scss
index bfd2c80..f961eaa 100644
--- a/src/style/style.scss
+++ b/src/style/style.scss
@@ -28,6 +28,7 @@
 @import "pages/location";
 @import "pages/viewer";
 @import "pages/shop";
+@import "pages/error";
 
 // Modules
 @import "modules/globe";
@@ -53,6 +54,7 @@
 @import "molecules/location";
 @import "molecules/switcher";
 @import "molecules/heading";
+@import "molecules/list-cta";
 @import "molecules/issue";
 @import "molecules/newsletter-form";
 @import "molecules/poster";