From 95b25d1a0e3cb40c5adb97c07b37addb33ee6be5 Mon Sep 17 00:00:00 2001
From: Tuan Nguyen <tuannguyen@nine.com.au>
Date: Mon, 10 Aug 2020 21:34:07 +1000
Subject: [PATCH] add 404

---
 src/components/ui/errors/ErrorPage.tsx | 10 +++++++
 src/components/ui/icons/Icon.tsx       |  1 +
 src/icons/arrow-narrow-left.svg        |  5 ++++
 src/pages/404.tsx                      | 39 ++++++++++++++++++++++++++
 4 files changed, 55 insertions(+)
 create mode 100644 src/components/ui/errors/ErrorPage.tsx
 create mode 100644 src/icons/arrow-narrow-left.svg
 create mode 100644 src/pages/404.tsx

diff --git a/src/components/ui/errors/ErrorPage.tsx b/src/components/ui/errors/ErrorPage.tsx
new file mode 100644
index 0000000..e03973a
--- /dev/null
+++ b/src/components/ui/errors/ErrorPage.tsx
@@ -0,0 +1,10 @@
+import tw, { styled } from 'twin.macro';
+
+export const ErrorHeader = styled.h2`
+	${tw`text-2xl font-semibold uppercase mb-8 mt-1`}
+`;
+
+export const ErrorStatusText = styled.h1<{ color?: string }>`
+	${tw`text-orange-500 uppercase`}
+	font-size: 145px;
+`;
diff --git a/src/components/ui/icons/Icon.tsx b/src/components/ui/icons/Icon.tsx
index e25bad5..4c9dbd3 100644
--- a/src/components/ui/icons/Icon.tsx
+++ b/src/components/ui/icons/Icon.tsx
@@ -28,6 +28,7 @@ export type SvgIcon =
 	| 'web'
 	| 'bag'
 	| 'calendar'
+	| 'arrow-narrow-left'
 	| 'arrow-narrow-right'
 	| 'check';
 
diff --git a/src/icons/arrow-narrow-left.svg b/src/icons/arrow-narrow-left.svg
new file mode 100644
index 0000000..7154f8a
--- /dev/null
+++ b/src/icons/arrow-narrow-left.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 20 20" fill="currentColor" class="arrow-narrow-left w-6 h-6">
+    <path fill-rule="evenodd"
+          d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z"
+          clip-rule="evenodd"></path>
+</svg>
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
new file mode 100644
index 0000000..adee631
--- /dev/null
+++ b/src/pages/404.tsx
@@ -0,0 +1,39 @@
+import tw from 'twin.macro';
+import { Helmet } from 'react-helmet';
+import { Container } from '~/components/ui/containers/Container';
+import { Icon } from '~/components/ui/icons/Icon';
+import React from 'react';
+import { ErrorHeader, ErrorStatusText } from '~/components/ui/errors/ErrorPage';
+import { Card } from '~/components/ui/containers/Card';
+import { Link } from 'gatsby';
+import { Button } from '~/components/ui/controls/Button';
+
+const Root = tw.div`
+	bg-gray-300  flex-grow py-10
+`;
+
+export default function NotFoundPage() {
+	return (
+		<Root>
+			<Helmet defer={false} title={'Not Found'} />
+			<Container className={'items-center'}>
+				<Card tw={'max-w-4xl sm:w-2/3 w-full p-10'}>
+					<div
+						tw={
+							'flex flex-col items-center justify-center transform -translate-y-5'
+						}
+					>
+						<ErrorStatusText>404</ErrorStatusText>
+						<ErrorHeader>Page Not Found</ErrorHeader>
+						<Link to={'/'}>
+							<Button>
+								<Icon name='arrow-narrow-left' size={16} className={'mr-2'} />
+								<span>Home Page</span>
+							</Button>
+						</Link>
+					</div>
+				</Card>
+			</Container>
+		</Root>
+	);
+}