layout previews

src/features/viewers/PreviewContainer.jsx

@@ -0,0 +1,18 @@
+import DefaultPresenter from './DefaultPresenter';
+import styles from './PreviewContainer.module.css';
+
+export default function PreviewContainer() {
+  return (
+    <div className={styles.previewContainer}>
+
+      <div className={styles.preview}>
+        {/* <DefaultPresenter /> */}
+      </div>
+      <div className={styles.label}>Default Presenter</div>
+
+      <div className={styles.preview}>
+      </div>
+      <div className={styles.label}>Audience</div>
+    </div>
+  );
+}

src/features/viewers/PreviewContainer.module.css

@@ -0,0 +1,17 @@
+.previewContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.preview {
+  margin-top: 2em;
+  width: 95%;
+  aspect-ratio: 16 / 9;
+  background-color: #222;
+}
+
+.label {
+  padding: 1em;
+  align-self: flex-end;
+}