From 98e808200893f3fbbbd9ddf47c64f7820184132b Mon Sep 17 00:00:00 2001
From: cv <34649812+cpvalente@users.noreply.github.com>
Date: Fri, 23 Apr 2021 14:21:52 +0200
Subject: [PATCH] feat: preview is link

---
 .../src/features/viewers/PreviewContainer.jsx | 37 +++++++++++++++----
 .../viewers/PreviewContainer.module.css       |  9 +++++
 2 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/client/src/features/viewers/PreviewContainer.jsx b/client/src/features/viewers/PreviewContainer.jsx
index 082c61a12..0b9c14485 100644
--- a/client/src/features/viewers/PreviewContainer.jsx
+++ b/client/src/features/viewers/PreviewContainer.jsx
@@ -8,26 +8,47 @@ export default function PreviewContainer() {
   return (
     <div className={styles.previewContainer}>
       <div className={styles.previewItem}>
-        <IFrameLoader
-          title='Default Presenter'
-          src={`${serverURL}/speaker`}
-        />
-        <div className={styles.label}>Default Presenter</div>
+        <IFrameLoader title='Default Presenter' src={`${serverURL}/speaker`} />
+        <a
+          href={`${serverURL}/speaker`}
+          target='_blank'
+          rel='noreferrer'
+          className={styles.label}
+        >
+          Default Presenter
+        </a>
       </div>
+
       <div className={styles.previewItem}>
         <IFrameLoader title='Audience' src={`${serverURL}/public`} />
-        <div className={styles.label}>Audience</div>
+        <div className={styles.label}>Audience (Not yet)</div>
       </div>
+
       <div className={styles.previewItem}>
         <IFrameLoader title='Stage Manager' src={`${serverURL}/sm`} />
-        <div className={styles.label}>Stage Manager</div>
+        <a
+          href={`${serverURL}/sm`}
+          target='_blank'
+          rel='noreferrer'
+          className={styles.label}
+        >
+          Stage Manager
+        </a>
       </div>
+
       <div className={styles.previewItem}>
         <IFrameLoader
           title='Lower third'
           src={`${serverURL}/lower?key=242424`}
         />
-        <div className={styles.label}>Lower third</div>
+        <a
+          href={`${serverURL}/lower`}
+          target='_blank'
+          rel='noreferrer'
+          className={styles.label}
+        >
+          Lower third
+        </a>
       </div>
     </div>
   );
diff --git a/client/src/features/viewers/PreviewContainer.module.css b/client/src/features/viewers/PreviewContainer.module.css
index e1f3aca6d..5e2e6c9ec 100644
--- a/client/src/features/viewers/PreviewContainer.module.css
+++ b/client/src/features/viewers/PreviewContainer.module.css
@@ -14,3 +14,12 @@
 .label {
   padding: 0.1em 4em;
 }
+
+a::after {
+  content: '  \2197';
+  color: #ff7597;
+}
+
+a:hover {
+  color: #ff7597;
+}