tldraw/components/editor.tsx

64 lines
1.4 KiB
TypeScript
Raw Normal View History

2021-05-12 11:27:33 +00:00
import useKeyboardEvents from "hooks/useKeyboardEvents"
import useLoadOnMount from "hooks/useLoadOnMount"
2021-05-09 13:04:42 +00:00
import Canvas from "./canvas/canvas"
import StatusBar from "./status-bar"
import Toolbar from "./toolbar"
2021-05-14 22:56:41 +00:00
import CodePanel from "./code-panel/code-panel"
2021-05-17 10:01:11 +00:00
import ControlsPanel from "./controls-panel/controls-panel"
import styled from "styles"
2021-05-26 10:34:10 +00:00
import StylePanel from "./style-panel/style-panel"
2021-05-09 13:04:42 +00:00
export default function Editor() {
2021-05-12 11:27:33 +00:00
useKeyboardEvents()
useLoadOnMount()
2021-05-12 11:27:33 +00:00
2021-05-09 13:04:42 +00:00
return (
2021-05-17 10:01:11 +00:00
<Layout>
2021-05-09 13:04:42 +00:00
<Canvas />
<StatusBar />
<Toolbar />
2021-05-17 10:01:11 +00:00
<LeftPanels>
<CodePanel />
<ControlsPanel />
</LeftPanels>
2021-05-26 10:34:10 +00:00
<RightPanels>
<StylePanel />
</RightPanels>
2021-05-17 10:01:11 +00:00
</Layout>
2021-05-09 13:04:42 +00:00
)
}
2021-05-17 10:01:11 +00:00
const Layout = styled("div", {
position: "fixed",
top: 0,
left: 0,
bottom: 0,
right: 0,
display: "grid",
gridTemplateRows: "40px 1fr 40px",
2021-05-26 10:34:10 +00:00
gridTemplateColumns: "minmax(50%, 400px) 1fr auto",
2021-05-17 10:01:11 +00:00
gridTemplateAreas: `
2021-05-26 10:34:10 +00:00
"toolbar toolbar toolbar"
"leftPanels main rightPanels"
"statusbar statusbar statusbar"
2021-05-17 10:01:11 +00:00
`,
})
const LeftPanels = styled("main", {
display: "grid",
gridArea: "leftPanels",
gridTemplateRows: "1fr auto",
padding: 8,
gap: 8,
})
2021-05-26 10:34:10 +00:00
const RightPanels = styled("main", {
display: "grid",
gridArea: "rightPanels",
gridTemplateRows: "auto",
height: "fit-content",
justifyContent: "flex-end",
padding: 8,
gap: 8,
})