From 29cb3a30ba7fe79ffa927e697e105cf0d8d66786 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 16:36:39 +0200
Subject: [PATCH] Add error page on Shop

---
 src/routes/shop/__error.svelte | 56 ++++++++++++++++++++++++++++++++++
 src/style/pages/_shop.scss     | 29 ++++++++++++++++++
 2 files changed, 85 insertions(+)
 create mode 100644 src/routes/shop/__error.svelte

diff --git a/src/routes/shop/__error.svelte b/src/routes/shop/__error.svelte
new file mode 100644
index 0000000..74abf69
--- /dev/null
+++ b/src/routes/shop/__error.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+    import { getContext } from 'svelte'
+    import Metas from '$components/Metas.svelte'
+    import PageTransition from '$components/PageTransition.svelte'
+    import ShopHeader from '$components/organisms/ShopHeader.svelte'
+    import PostersGrid from '$components/organisms/PostersGrid.svelte'
+
+    export let status: number
+
+    const { posters } = getContext('shop')
+    const errors = {
+        404: {
+            title: 'Product not found',
+            message: 'The product you are looking for does not exist… yet!',
+        },
+        500: {
+            title: 'Server error',
+            message: "That is embarassing, the problem is on our side.",
+        },
+    }
+</script>
+
+<Metas
+    title="{errors[status].title} – Houses Of"
+/>
+
+
+<PageTransition name="shop-page">
+    <ShopHeader />
+
+    <section class="shop-page__error">
+        <div class="container grid">
+            <div class="inner">
+                <h2 class="title-big">Uh oh!</h2>
+                <p class="text-medium">{errors[status].message}</p>
+            </div>
+        </div>
+    </section>
+
+    <PostersGrid {posters} />
+</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/style/pages/_shop.scss b/src/style/pages/_shop.scss
index 612f497..4878a5a 100644
--- a/src/style/pages/_shop.scss
+++ b/src/style/pages/_shop.scss
@@ -30,6 +30,35 @@
             transform: translate3d(0,0,0);
         }
     }
+
+    // Error
+    &__error {
+        padding: 64px 0;
+        background: $color-cream;
+        color: $color-text;
+        text-align: center;
+
+        @include bp (sm) {
+            padding: clamp(64px, 12vw, 160px) 0;
+            text-align: left;
+        }
+
+        .inner {
+            grid-column: 1 / span 8;
+
+            @include bp (sm) {
+                grid-column: 3 / span 12;
+            }
+        }
+        h2 {
+            margin-bottom: 8px;
+            color: $color-secondary;
+
+            @include bp (sm) {
+                margin-bottom: 16px;
+            }
+        }
+    }
 }
 
 // Cart