mockup info view

client/src/features/editors/Editor.jsx

@@ -1,10 +1,10 @@
 import { lazy, useEffect } from 'react';
 import { Heading } from '@chakra-ui/layout';
 import { Box } from '@chakra-ui/layout';
-import NumberedText from 'common/components/text/NumberedText';
-import styles from './Editor.module.css';
 import { useDisclosure } from '@chakra-ui/hooks';
-import SettingsModal from '../modals/SettingsModal';
+import styles from './Editor.module.css';
+import NumberedText from 'common/components/text/NumberedText';
+import SettingsModal from 'features/modals/SettingsModal';
 import MenuBar from 'features/menu/MenuBar';
 
 const EventListWrapper = lazy(() =>
@@ -12,6 +12,7 @@ const EventListWrapper = lazy(() =>
 );
 const PlaybackControl = lazy(() => import('features/control/PlaybackControl'));
 const MessageControl = lazy(() => import('features/control/MessageControl'));
+const Info = lazy(() => import('features/info/Info'));
 
 export default function Editor() {
   const { isOpen, onOpen, onClose } = useDisclosure();
@@ -68,7 +69,9 @@ export default function Editor() {
             Info
           </Heading>
           <NumberedText number={4} text={'Running Info'} />
-          <div className={styles.content}></div>
+          <div className={styles.content}>
+            <Info />
+          </div>
         </Box>
       </div>
     </>

client/src/features/info/Info.jsx

@@ -0,0 +1,82 @@
+import { Icon } from '@chakra-ui/react';
+import { FiChevronUp } from 'react-icons/fi';
+import style from './Info.module.css';
+
+export default function Info() {
+  return (
+    <>
+      <div className={style.main}>Event 1/31</div>
+
+      <div className={style.container}>
+        <div className={style.header}>
+          Now
+          <Icon
+            className={style.moreExpanded}
+            as={FiChevronUp}
+            marginTop='-0.5em'
+            // onClick={() => props.setCollapsed(true)}
+          />
+        </div>
+
+        <div>
+          <span className={style.label}>Title: </span>Demo title
+        </div>
+        <div>
+          <span className={style.label}>Subtitle: </span>Demo Subtitle
+        </div>
+        <div>
+          <span className={style.label}>Presenter: </span>Demo Presenter Name
+        </div>
+        <div>
+          <span className={style.label}>Notes: </span>Demo Notes
+        </div>
+      </div>
+
+      <div className={style.container}>
+        <div className={style.header}>
+          Next
+          <Icon
+            className={style.moreExpanded}
+            as={FiChevronUp}
+            marginTop='-0.5em'
+            // onClick={() => props.setCollapsed(true)}
+          />
+        </div>
+        <div>
+          <span className={style.label}>Title: </span>Demo title
+        </div>
+        <div>
+          <span className={style.label}>Subtitle: </span>Demo Subtitle
+        </div>
+        <div>
+          <span className={style.label}>Presenter: </span>Demo Presenter Name
+        </div>
+        <div>
+          <span className={style.label}>Notes: </span>Demo Notes
+        </div>
+      </div>
+
+      <div className={style.container}>
+        <div className={style.header}>
+          Log
+          <Icon
+            className={style.moreCollapsed}
+            as={FiChevronUp}
+            marginTop='-0.5em'
+            // onClick={() => props.setCollapsed(true)}
+          />
+        </div>
+        <ul className={style.log}>
+          <li className={style.info}>10:35:23 [PLAYBACK] Next</li>
+          <li className={style.client}>
+            10:32:10 [CLIENT] New Socket client (Total now 3)
+          </li>
+          <li className={style.info}>10:28:23 [PLAYBACK] Next</li>
+          <li className={style.info}>10:25:23 [PLAYBACK] Play</li>
+          <li className={style.info}>10:23:13 [SERVER] Server Reconnected</li>
+          <li className={style.error}>10:23:10 [SERVER] Server Disconnected</li>
+        </ul>
+      </div>
+    </>
+  );
+}

client/src/features/info/Info.module.css

@@ -0,0 +1,63 @@
+.container {
+  margin-top: 1em;
+  display: flex;
+  flex-direction: column;
+  background-color: rgba(0, 0, 0, 0.05);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+  padding: 8px;
+  overflow-y: scroll;
+}
+
+.main {
+  font-size: 0.9em;
+  text-align: right;
+  color: #ff7597;
+}
+
+.header {
+  padding: 0;
+  margin: 0;
+  font-size: 0.9em;
+  color: #aaa;
+  display: flex;
+  justify-content: space-between;
+}
+
+.label {
+  padding: 0;
+  margin: 0;
+  font-size: 0.9em;
+  color: #ccc;
+}
+
+ul > li {
+  font-size: 0.9em;
+  color: #fff;
+}
+
+.info {
+  color: #fff;
+}
+
+.error {
+  color: red;
+}
+
+.client {
+  color: lightblue;
+}
+
+.moreExpanded,
+.moreCollapsed {
+  cursor: pointer;
+  color: #fff;
+}
+
+.moreExpanded {
+  transform: rotate(0deg);
+}
+
+.moreCollapsed {
+  transform: rotate(180deg);
+}