GitHub/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2025-02-04 01:32:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

seperate styles

Browse Source
This commit is contained in:
AykutSarac 2022-04-06 21:55:29 +03:00
parent 53997c7568
commit 08c9553119
2 changed files with 100 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

154
src/pages/editor/index.tsx
View File

@ -1,14 +1,11 @@
import React from "react"; import React from "react";
import Head from "next/head"; 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 { defaultJson } from "src/constants/data";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
import { LiveEditor } from "src/containers/LiveEditor"; import { LiveEditor } from "src/containers/LiveEditor";
import { Loading } from "src/components/Loading"; 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"), { const JsonEditor = dynamic(() => import("src/containers/JsonEditor"), {
ssr: false, ssr: false,
@ -20,116 +17,8 @@ const Sidebar = dynamic(() => import("src/components/Sidebar"), {
loading: () => <Loading message="Loading Sidebar..." />, loading: () => <Loading message="Loading Sidebar..." />,
}); });
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 Editor: React.FC = () => {
const [json, setJson] = React.useState(JSON.stringify(defaultJson)); const [json, setJson] = React.useState(JSON.stringify(defaultJson));
const route = useRouter();
React.useEffect(() => { React.useEffect(() => {
const jsonStored = localStorage.getItem("json"); const jsonStored = localStorage.getItem("json");
@ -137,30 +26,27 @@ const Editor: React.FC = () => {
}, []); }, []);
return ( return (
<StyledPageWrapper> <>
<Head> <Head>
<title>Editor | JSON Visio</title> <title>Editor | JSON Visio</title>
</Head> </Head>
<Sidebar setJson={setJson} /> <Styles.StyledPageWrapper>
<StyledEditorWrapper> <Sidebar setJson={setJson} />
<StyledTools></StyledTools> <Styles.StyledEditorWrapper>
<StyledEditor <Styles.StyledTools></Styles.StyledTools>
maxSize={800} <Styles.StyledEditor
minSize={300} maxSize={800}
defaultSize={450} minSize={300}
split="vertical" defaultSize={450}
> split="vertical"
<JsonEditor json={json} setJson={setJson} /> >
<LiveEditor json={json} setJson={setJson} /> <JsonEditor json={json} setJson={setJson} />
</StyledEditor> <LiveEditor json={json} setJson={setJson} />
</StyledEditorWrapper> </Styles.StyledEditor>
<StyledIncompatible> </Styles.StyledEditorWrapper>
This app is not compatible with your device! <Incompatible />
<Button className="incompatible" onClick={() => route.push("/")}> </Styles.StyledPageWrapper>
Go Back </>
</Button>
</StyledIncompatible>
</StyledPageWrapper>
); );
}; };

80
src/pages/editor/styles.tsx Normal file
View File

@ -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;
}
`;