From 9708330a04364a0135e9582fd157d66691cea47f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20Famibelle-Pronzola?= <c.pronzola@tuta.io>
Date: Sat, 22 Jul 2023 13:05:50 +0400
Subject: [PATCH] Move customs errors to app directory

---
 pages/500.js => app/error.js     | 29 ++++++++++++++---------------
 pages/404.js => app/not-found.js | 12 ++++++------
 2 files changed, 20 insertions(+), 21 deletions(-)
 rename pages/500.js => app/error.js (53%)
 rename pages/404.js => app/not-found.js (76%)

diff --git a/pages/500.js b/app/error.js
similarity index 53%
rename from pages/500.js
rename to app/error.js
index f7e217c..c0f4fe8 100644
--- a/pages/500.js
+++ b/app/error.js
@@ -1,20 +1,19 @@
-import {Container, Typography} from '@mui/material'
-import Link from 'next/link'
-import Image from 'next/image'
+'use client'
 
-export default function Custom500() {
+import Image from 'next/image'
+import {Container, Typography} from '@mui/material'
+
+export default function Error() {
   return (
-    <Container maxWidth='sm'>
-      <Link passHref href='/'>
-        <Image
-          alt='Logo OKI'
-          width={512}
-          height={512}
-          src='/logo-512x512.png'
-          quality={20}
-        />
-      </Link>
-      <Typography variant='h2' align='center' >500 - Erreur du serveur 🥺</Typography>
+    <Container sx={{textAlign: 'center', minHeight: '100vh'}} maxWidth='sm'>
+      <Image
+        alt='Logo OKI'
+        width={192}
+        height={192}
+        src='/logo-192x192.png'
+        quality={20}
+      />
+      <Typography variant='h2' align='center' >500 - Erreur du serveur 😭</Typography>
       <Typography style={{marginTop: '1em', color: 'green'}} variant='h3' align='center'>Nous mettons tout en œuvre pour rétablir le site dans les plus brefs délais 💪🏾</Typography>
     </Container>
   )
diff --git a/pages/404.js b/app/not-found.js
similarity index 76%
rename from pages/404.js
rename to app/not-found.js
index 09bc1cc..b45ff7b 100644
--- a/pages/404.js
+++ b/app/not-found.js
@@ -1,16 +1,16 @@
-import {Container, Typography} from '@mui/material'
 import Link from 'next/link'
 import Image from 'next/image'
+import {Container, Typography} from '@mui/material'
 
-export default function Custom404() {
+export default function NotFound() {
   return (
-    <Container maxWidth='sm'>
+    <Container sx={{textAlign: 'center'}} maxWidth='sm'>
       <Link passHref href='/'>
         <Image
           alt='Logo OKI'
-          width={512}
-          height={512}
-          src='/logo-512x512.png'
+          width={192}
+          height={192}
+          src='/logo-192x192.png'
           quality={20}
         />
       </Link>