diff --git a/src/pages/editor/index.tsx b/src/pages/editor/index.tsx
index 089191f..9fa28cc 100644
--- a/src/pages/editor/index.tsx
+++ b/src/pages/editor/index.tsx
@@ -1,14 +1,11 @@
import React from "react";
import Head from "next/head";
-import { useRouter } from "next/router";
-import styled from "styled-components";
-import SplitPane from "react-split-pane";
-
-import { Button } from "src/components/Button";
import { defaultJson } from "src/constants/data";
import dynamic from "next/dynamic";
import { LiveEditor } from "src/containers/LiveEditor";
import { Loading } from "src/components/Loading";
+import { Incompatible } from "src/containers/Incompatible";
+import * as Styles from "src/pages/editor/styles";
const JsonEditor = dynamic(() => import("src/containers/JsonEditor"), {
ssr: false,
@@ -20,116 +17,8 @@ const Sidebar = dynamic(() => import("src/components/Sidebar"), {
loading: () => ,
});
-const StyledPageWrapper = styled.div`
- display: flex;
-`;
-
-const StyledIncompatible = styled.div`
- display: none;
-
- @media only screen and (max-width: 568px) {
- position: fixed;
- top: 0;
- left: 0;
- display: flex;
- flex-direction: column;
- background: ${({ theme }) => theme.BLACK_LIGHT};
- color: ${({ theme }) => theme.SILVER};
- width: 100%;
- height: 100vh;
- justify-content: center;
- align-items: center;
-
- button {
- margin-top: 60px;
- }
-
- &::before {
- content: "Uh, oh!";
- font-weight: 700;
- font-size: 60px;
- opacity: 0.6;
- }
- }
-`;
-
-const StyledEditorWrapper = styled.div`
- width: 100%;
- overflow: hidden;
-
- @media only screen and (max-width: 568px) {
- display: none;
- }
-`;
-
-const StyledTools = styled.div`
- display: flex;
- align-items: center;
- height: 15px;
- border-bottom: 1px solid ${({ theme }) => theme.BLACK};
- padding: 4px 16px;
- background: ${({ theme }) => theme.BLACK_SECONDARY};
- color: ${({ theme }) => theme.SILVER};
-`;
-
-const StyledEditor = styled(SplitPane)`
- position: relative !important;
- display: flex;
- background: ${({ theme }) => theme.BLACK_LIGHT};
- height: calc(100vh - 26px) !important;
-
- .Resizer {
- background: #000;
- opacity: 0.2;
- box-sizing: border-box;
- background-clip: padding-box;
- z-index: 1;
- }
-
- .Resizer:hover {
- transition: all 2s ease;
- }
-
- .Resizer.horizontal {
- height: 11px;
- margin: -5px 0;
- border-top: 5px solid rgba(255, 255, 255, 0);
- border-bottom: 5px solid rgba(255, 255, 255, 0);
- cursor: row-resize;
- width: 100%;
- }
-
- .Resizer.horizontal:hover {
- border-top: 5px solid rgba(0, 0, 0, 0.5);
- border-bottom: 5px solid rgba(0, 0, 0, 0.5);
- }
-
- .Resizer.vertical {
- width: 16px;
- margin: 0 -5px;
- border-left: 5px solid rgba(255, 255, 255, 0);
- border-right: 5px solid rgba(255, 255, 255, 0);
- cursor: col-resize;
- z-index: 0 !important;
- }
-
- .Resizer.vertical:hover {
- border-left: 5px solid rgba(0, 0, 0, 0.5);
- border-right: 5px solid rgba(0, 0, 0, 0.5);
- }
-
- .Resizer.disabled {
- cursor: not-allowed;
- }
-
- .Resizer.disabled:hover {
- border-color: transparent;
- }
-`;
-
const Editor: React.FC = () => {
const [json, setJson] = React.useState(JSON.stringify(defaultJson));
- const route = useRouter();
React.useEffect(() => {
const jsonStored = localStorage.getItem("json");
@@ -137,30 +26,27 @@ const Editor: React.FC = () => {
}, []);
return (
-
+ <>
Editor | JSON Visio
-
-
-
-
-
-
-
-
-
- This app is not compatible with your device!
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
);
};
diff --git a/src/pages/editor/styles.tsx b/src/pages/editor/styles.tsx
new file mode 100644
index 0000000..c8e873c
--- /dev/null
+++ b/src/pages/editor/styles.tsx
@@ -0,0 +1,80 @@
+import SplitPane from "react-split-pane";
+import styled from "styled-components";
+
+export const StyledPageWrapper = styled.div`
+ display: flex;
+`;
+
+export const StyledEditorWrapper = styled.div`
+ width: 100%;
+ overflow: hidden;
+
+ @media only screen and (max-width: 568px) {
+ display: none;
+ }
+`;
+
+export const StyledTools = styled.div`
+ display: flex;
+ align-items: center;
+ height: 15px;
+ border-bottom: 1px solid ${({ theme }) => theme.BLACK};
+ padding: 4px 16px;
+ background: ${({ theme }) => theme.BLACK_SECONDARY};
+ color: ${({ theme }) => theme.SILVER};
+`;
+
+export const StyledEditor = styled(SplitPane)`
+ position: relative !important;
+ display: flex;
+ background: ${({ theme }) => theme.BLACK_LIGHT};
+ height: calc(100vh - 26px) !important;
+
+ .Resizer {
+ background: #000;
+ opacity: 0.2;
+ box-sizing: border-box;
+ background-clip: padding-box;
+ z-index: 1;
+ }
+
+ .Resizer:hover {
+ transition: all 2s ease;
+ }
+
+ .Resizer.horizontal {
+ height: 11px;
+ margin: -5px 0;
+ border-top: 5px solid rgba(255, 255, 255, 0);
+ border-bottom: 5px solid rgba(255, 255, 255, 0);
+ cursor: row-resize;
+ width: 100%;
+ }
+
+ .Resizer.horizontal:hover {
+ border-top: 5px solid rgba(0, 0, 0, 0.5);
+ border-bottom: 5px solid rgba(0, 0, 0, 0.5);
+ }
+
+ .Resizer.vertical {
+ width: 16px;
+ margin: 0 -5px;
+ border-left: 5px solid rgba(255, 255, 255, 0);
+ border-right: 5px solid rgba(255, 255, 255, 0);
+ cursor: col-resize;
+ z-index: 0 !important;
+ }
+
+ .Resizer.vertical:hover {
+ border-left: 5px solid rgba(0, 0, 0, 0.5);
+ border-right: 5px solid rgba(0, 0, 0, 0.5);
+ }
+
+ .Resizer.disabled {
+ cursor: not-allowed;
+ }
+
+ .Resizer.disabled:hover {
+ border-color: transparent;
+ }
+`;