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

style editor page

Browse Source
This commit is contained in:
AykutSarac 2022-02-02 18:49:16 +03:00
parent 4942d68d3d
commit 90fbb799d8
1 changed files with 26 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,41 +1,49 @@
import React from "react";
import { Sidebar } from "src/components/Sidebar";
import styled from "styled-components";
import JsonEditor from "./JsonEditor";
import LiveEditor from "./LiveEditor";
import { JsonEditor } from "./JsonEditor";
import { LiveEditor } from "./LiveEditor";
const StyledPageWrapper = styled.div`
display: flex;
width: 100%;
`;
const StyledEditorWrapper = styled.div`
height: 75vh;
width: 100%;
`;
const StyledTools = styled.div`
height: 60px;
border-radius: 5px 5px 0 0;
display: flex;
align-items: center;
height: 36px;
border: 1px solid ${({ theme }) => theme.BLACK};
padding: 8px 16px 0;
padding: 4px 16px;
background: ${({ theme }) => theme.BLACK_SECONDARY};
color: ${({ theme }) => theme.SILVER};
`;
const StyledEditor = styled.div`
display: flex;
justify-content: center;
align-items: center;
border-radius: 0 0 5px 5px;
height: 100%;
background: ${({ theme }) => theme.BLACK_LIGHT};
border: 1px solid ${({ theme }) => theme.BLACK};
border-top: none;
overflow: hidden;
height: calc(100vh - 48px);
`;
const Editor: React.FC = () => {
return (
<StyledPageWrapper>
<Sidebar />
<StyledEditorWrapper>
<StyledTools>tools</StyledTools>
<StyledTools>Tools</StyledTools>
<StyledEditor>
<JsonEditor />
<LiveEditor />
</StyledEditor>
</StyledEditorWrapper>
</StyledPageWrapper>
);
};