layout editor page

src/features/editors/Editor.jsx

@@ -0,0 +1,43 @@
+import { Flex, Text } from '@chakra-ui/layout';
+import { Heading } from '@chakra-ui/layout';
+import { SimpleGrid } from '@chakra-ui/layout';
+import { Box } from '@chakra-ui/layout';
+import NumberedText from '../../common/components/text/NumberedText';
+import EventForm from '../form/EventForm';
+import PreviewContainer from '../viewers/PreviewContainer';
+import styles from './Editor.module.css';
+import EventList from './list/EventList';
+
+export default function Editor() {
+  return (
+    <SimpleGrid
+      minChildWidth='120px'
+      spacing='40px'
+      className={styles.mainContainer}
+    >
+      <Box className={styles.editor} borderRadius='0.5em'>
+        <Heading>List Events</Heading>
+        <NumberedText number={1} text={'Select Event'} />
+        <div className={styles.content}>
+          <EventList />
+        </div>
+      </Box>
+
+      <Box className={styles.editor} borderRadius='0.5em'>
+        <Heading>Event Details</Heading>
+        <NumberedText number={2} text={'Click Save to send to screens'} />
+        <div className={styles.content}>
+          <EventForm />
+        </div>
+      </Box>
+
+      <Box className={styles.editor} borderRadius='0.5em'>
+        <Heading>List Events</Heading>
+        <NumberedText number={3} text={'Preview changes in screens'} />
+        <div className={styles.content}>
+          <PreviewContainer />
+        </div>
+      </Box>
+    </SimpleGrid>
+  );
+}

src/features/editors/Editor.module.css

@@ -0,0 +1,19 @@
+.mainContainer {
+  width: 95%;
+  margin: auto;
+  height: 95vh;
+}
+
+.editor {
+  height: 100%;
+  margin-top: 1em;
+  background-color: white;
+  padding: 2em;
+
+  display: flex;
+  flex-direction: column;
+}
+
+.content {
+  padding-top: 2em;
+}