From 5a857185fac0754f43016326bc7ba182a190f1e5 Mon Sep 17 00:00:00 2001
From: cv <34649812+cpvalente@users.noreply.github.com>
Date: Wed, 24 Mar 2021 09:57:37 +0100
Subject: [PATCH] message form

---
 src/features/form/MessageForm.jsx | 49 +++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 src/features/form/MessageForm.jsx

diff --git a/src/features/form/MessageForm.jsx b/src/features/form/MessageForm.jsx
new file mode 100644
index 000000000..39ab4255c
--- /dev/null
+++ b/src/features/form/MessageForm.jsx
@@ -0,0 +1,49 @@
+import { IconButton } from '@chakra-ui/button';
+import { FormControl, FormLabel } from '@chakra-ui/form-control';
+import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons';
+import { Input } from '@chakra-ui/input';
+import { useState } from 'react';
+
+export default function MessageForm(props) {
+  const [presenterShow, setPresenterShow] = useState(false);
+  const [publicShow, setPublicShow] = useState(false);
+
+  const handleSetPresenter = () => {
+    setPresenterShow(!presenterShow);
+  }
+
+  const handleSetPublic = () => {
+    setPublicShow(!publicShow);
+  }
+
+  return (
+    <>
+      <form style={{ display: 'flex', gap: '1em' }}>
+        <FormControl id='presenterMessage'>
+          <FormLabel>Presenter screen message</FormLabel>
+          <Input placeholder='only the presenter screens see this' />
+        </FormControl>
+        <IconButton
+          style={{ alignSelf: 'flex-end' }}
+          colorScheme='teal'
+          variant={presenterShow ? 'solid' : 'outline'}
+          onClick={handleSetPresenter}
+          icon={presenterShow ? <ViewOffIcon /> : <ViewIcon />}
+        />
+      </form>
+      <form style={{ display: 'flex', gap: '1em', paddingTop: '1em' }}>
+        <FormControl id='generalMessage'>
+          <FormLabel>Public screen message</FormLabel>
+          <Input placeholder='all screens will render this' />
+        </FormControl>
+        <IconButton
+          style={{ alignSelf: 'flex-end' }}
+          colorScheme='teal'
+          variant={publicShow ? 'solid' : 'outline'}
+          onClick={handleSetPublic}
+          icon={publicShow ? <ViewOffIcon /> : <ViewIcon />}
+        />
+      </form>
+    </>
+  );
+}