create sample view

src/features/viewers/DefaultViewer.jsx

@@ -0,0 +1,36 @@
+import 'bulma/css/bulma.css';
+import { addMinutes, format } from 'date-fns';
+import { useEffect, useState } from 'react';
+import { Container, Progress } from 'react-bulma-components/dist';
+import { sampleData } from '../../app/sampleData';
+import Countdown from '../../common/components/countdown/Countdown';
+import MyProgressBar from '../../common/components/myProgressBar/MyProgressBar';
+import SmallTimer from '../../common/components/smallTimer/SmallTimer';
+import './viewers.css';
+
+export default function DefaultViewer() {
+  const [data, setData] = useState(sampleData);
+  const [timer, setTimer] = useState(sampleData.timerDuration);
+  const [elapsed, setElapsed] = useState(0);
+
+  const timeNow = new Date();
+
+  return (
+    <Container fluid className='presenter'>
+      <div className='presentationTitle'>{data.title}</div>
+      <div className='presentationSub'>{data.subtitle}</div>
+      <Countdown time={format(timer, 'mm.ss')} />
+      {!data.message.active && <MyProgressBar normalisedComplete={0.9} />}
+      <div
+        className={data.message.active ? 'userMessage' : 'userMessage hidden'}
+      >
+        {data.message.text}
+      </div>
+      <div className='extra'>
+        <SmallTimer label='Scheduled Start' time={data.timeStart} />
+        <SmallTimer label='Current Time' time={format(timeNow, 'HH:mm')} />
+        <SmallTimer label='Scheduled End' time={data.timeEnd} />
+      </div>
+    </Container>
+  );
+}

src/features/viewers/viewers.css

@@ -0,0 +1,41 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;800&display=swap');
+
+.presenter {
+  font-size: 24px;
+  height: 100%;
+  color: #ffffff;
+  display: flex;
+  flex-direction: column;
+  border: red 1px solid;
+}
+
+.presentationTitle {
+  font-size: 5vw;
+  text-align: left;
+}
+
+.presentationSub {
+  font-size: 3vw;
+  text-align: left;
+}
+
+.userMessage {
+  font-size: 10em;
+  text-align: center;
+}
+
+.hidden {
+  display: none;
+}
+
+.extra {
+  width: 100%;
+  position: absolute;
+  bottom: 3vh;
+  left: 0;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-around;
+}