mockup info view

2026-08-18 05:34:09 +00:00 · 2021-06-11 11:09:04 +02:00
parent 21f1144fce
commit 9f896fe440
3 changed files with 152 additions and 4 deletions
@@ -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>
+    </>
+  );
+}
@@ -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);
+}