From 5cea1fb140c66d891781dc4c09b21cb1e5f59c8c Mon Sep 17 00:00:00 2001
From: cv <34649812+cpvalente@users.noreply.github.com>
Date: Mon, 22 Mar 2021 21:36:22 +0100
Subject: [PATCH] layout editor page

---
 src/features/editors/Editor.jsx        | 43 ++++++++++++++++++++++++++
 src/features/editors/Editor.module.css | 19 ++++++++++++
 2 files changed, 62 insertions(+)
 create mode 100644 src/features/editors/Editor.jsx
 create mode 100644 src/features/editors/Editor.module.css

diff --git a/src/features/editors/Editor.jsx b/src/features/editors/Editor.jsx
new file mode 100644
index 000000000..bcf39724d
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/features/editors/Editor.module.css b/src/features/editors/Editor.module.css
new file mode 100644
index 000000000..bb8e8a16b
--- /dev/null
+++ b/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;
+}