3 éve · b9637111cf
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -0,0 +1,53 @@
 
															+import React from "react";
														
 
															+import { useRouter } from "next/router";
														
 
															+import styled from "styled-components";
														
 
															+
														
 
															+import { Button } from "src/components/Button";
														
 
															+import { Image } from "src/components/Image";
														
 
															+
														
 
															+const StyledNotFound = styled.div`
														
 
															+  display: flex;
														
 
															+  justify-content: center;
														
 
															+  align-items: center;
														
 
															+  flex-direction: column;
														
 
															+  margin-top: 0 40px;
														
 
															+  text-align: center;
														
 
															+`;
														
 
															+
														
 
															+const StyledMessage = styled.h4`
														
 
															+  color: ${({ theme }) => theme.FULL_WHITE};
														
 
															+  font-size: 25px;
														
 
															+  font-weight: 700;
														
 
															+  margin: 10px 0;
														
 
															+`;
														
 
															+
														
 
															+const StyledSubMessage = styled.div`
														
 
															+  width: 50%;
														
 
															+  color: ${({ theme }) => theme.SILVER};
														
 
															+  margin-bottom: 25px;
														
 
															+`;
														
 
															+
														
 
															+const StyledImageWrapper = styled.div`
														
 
															+  width: 300px;
														
 
															+`;
														
 
															+
														
 
															+const NotFound: React.FC = () => {
														
 
															+  const router = useRouter();
														
 
															+
														
 
															+  return (
														
 
															+    <StyledNotFound>
														
 
															+      <StyledImageWrapper>
														
 
															+        <Image src="/404.svg" alt="404" width={300} height={400} />
														
 
															+      </StyledImageWrapper>
														
 
															+      <StyledMessage>WIZARDS BEHIND CURTAINS?</StyledMessage>
														
 
															+      <StyledSubMessage>
														
 
															+        Looks like you&apos;re lost, let&apos;s head back to the home!
														
 
															+      </StyledSubMessage>
														
 
															+      <Button type="button" onClick={() => router.push("/")}>
														
 
															+        Go Home
														
 
															+      </Button>
														
 
															+    </StyledNotFound>
														
 
															+  );
														
 
															+};
														
 
															+
														
 
															+export default NotFound;
														
--- a/src/pages/editor.tsx
+++ b/src/pages/editor.tsx
@@ -0,0 +1,35 @@
 
															+import React from "react";

														
 
															+import Head from "next/head";

														
 
															+import styled from "styled-components";

														
 
															+import dynamic from "next/dynamic";

														
 
															+

														
 
															+const Editor = dynamic(() => import("src/containers/Editor"), { ssr: false });

														
 
															+

														
 
															+const StyledEditorWrapper = styled.div`

														
 
															+  *::-webkit-scrollbar {

														
 
															+    width: 8px;

														
 
															+    background: ${({ theme }) => theme.BLACK_SECONDARY};

														
 
															+  }

														
 
															+

														
 
															+  *::-webkit-scrollbar-thumb {

														
 
															+    border-radius: 5px;

														
 
															+    background-color: ${({ theme }) => theme.SILVER_DARK};

														
 
															+  }

														
 
															+`;

														
 
															+

														
 
															+const EditorPage: React.FC = () => {

														
 
															+  return (

														
 
															+    <StyledEditorWrapper>

														
 
															+      <Head>

														
 
															+        <title>Editor | JSON Visio</title>

														
 
															+        <meta

														
 
															+          name="description"

														
 
															+          content="View your JSON data in graphs instantly."

														
 
															+        />

														
 
															+      </Head>

														
 
															+      <Editor />

														
 
															+    </StyledEditorWrapper>

														
 
															+  );

														
 
															+};

														
 
															+

														
 
															+export default EditorPage;