From dbfe920735a767be29e5971e915eb5c409f542b8 Mon Sep 17 00:00:00 2001 From: sarross88 <94658493+sarross88@users.noreply.github.com> Date: Mon, 25 Nov 2024 20:19:49 -0500 Subject: [PATCH] Created Error Page --- src/assets/not-found.svg | 1 + src/pages/Error.jsx | 53 +++++++++++++++++++++++++++++++++++++--- 2 files changed, 50 insertions(+), 4 deletions(-) create mode 100644 src/assets/not-found.svg diff --git a/src/assets/not-found.svg b/src/assets/not-found.svg new file mode 100644 index 0000000..1799f83 --- /dev/null +++ b/src/assets/not-found.svg @@ -0,0 +1 @@ +page not found \ No newline at end of file diff --git a/src/pages/Error.jsx b/src/pages/Error.jsx index a270c4d..cfcd2bc 100644 --- a/src/pages/Error.jsx +++ b/src/pages/Error.jsx @@ -1,14 +1,59 @@ import { Link, useRouteError } from 'react-router-dom'; +import styled from 'styled-components'; +import img from '../assets/not-found.svg'; const Error = () => { const error = useRouteError(); console.log(error); + if (error.status === 404) { + return ( + +
+ not-found +

Oops! Page not found!

+

We can't seem to find the page you are looking for...

+ Go Back Home +
+
+ ); + } return ( - <> -

Error Page

- Back Home - + +
+

Something Went Wrong

+ Go Back Home +
+
); }; export default Error; + +const Wrapper = styled.main` + min-height: 100vh; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + img { + width: 90vw; + max-width: 600px; + display: block; + margin-bottom: 2rem; + margin-top: -3rem; + } + h3 { + margin-bottom: 0.5rem; + } + p { + line-height: 1.5; + margin-top: 0.5rem; + margin-bottom: 1rem; + color: var(--text-secondary-color); + } + a { + color: var(--primary-500); + text-transform: capitalize; + text-decoration: underline; + } +`;