feat: timer preview

apps/client/src/features/control/message/TimerViewControl.tsx

@@ -0,0 +1,62 @@
+import { Button } from '@chakra-ui/react';
+
+import { setMessage, useTimerViewControl } from '../../../common/hooks/useSocket';
+
+import TimerPreview from './TimerPreview';
+
+import style from './MessageControl.module.scss';
+
+export default function TimerControlsPreview() {
+  const { blackout, blink, secondarySource } = useTimerViewControl();
+
+  const toggleSecondary = (newValue: 'aux' | 'external' | null) => {
+    if (secondarySource === newValue) {
+      setMessage.timerSecondary(null);
+    } else {
+      setMessage.timerSecondary(newValue);
+    }
+  };
+
+  return (
+    <div className={style.previewContainer}>
+      <TimerPreview />
+
+      <div className={style.options}>
+        <Button
+          size='sm'
+          variant={secondarySource === 'aux' ? 'ontime-filled' : 'ontime-subtle'}
+          onClick={() => toggleSecondary('aux')}
+        >
+          Show Aux timer
+        </Button>
+        <Button
+          size='sm'
+          variant={secondarySource === 'external' ? 'ontime-filled' : 'ontime-subtle'}
+          onClick={() => toggleSecondary('external')}
+        >
+          Show external
+        </Button>
+
+        <hr className={style.divider} />
+
+        <Button
+          size='sm'
+          variant={blink ? 'ontime-filled' : 'ontime-subtle'}
+          onClick={() => setMessage.timerBlink(!blink)}
+          data-testid='toggle timer blink'
+        >
+          Blink
+        </Button>
+        <Button
+          size='sm'
+          className={style.blackoutButton}
+          variant={blackout ? 'ontime-filled' : 'ontime-subtle'}
+          onClick={() => setMessage.timerBlackout(!blackout)}
+          data-testid='toggle timer blackout'
+        >
+          Blackout screen
+        </Button>
+      </div>
+    </div>
+  );
+}