Refactored buttons and modals to be separate

src/modals/StartStreamModal.js

@@ -0,0 +1,45 @@
+import React from "react";
+import { Box, Text, Button, Label, Flex } from "theme-ui";
+
+import Modal from "../components/Modal";
+
+function StartStreamModal({
+  isOpen,
+  onRequestClose,
+  isSupported,
+  unavailableMessage,
+  stream,
+  noAudioTrack,
+  noAudioMessage,
+  onStreamStart,
+  onStreamEnd,
+}) {
+  return (
+    <Modal isOpen={isOpen} onRequestClose={onRequestClose}>
+      <Box>
+        <Label pt={2} pb={1}>
+          Radio (experimental)
+        </Label>
+        <Text as="p" mb={2} variant="caption">
+          Share your computers audio with the party
+        </Text>
+        {!isSupported && unavailableMessage}
+        {isSupported && !stream && noAudioTrack && noAudioMessage}
+        <Flex py={2}>
+          {isSupported && !stream && (
+            <Button sx={{ flexGrow: 1 }} onClick={onStreamStart}>
+              Start Radio
+            </Button>
+          )}
+          {isSupported && stream && (
+            <Button sx={{ flexGrow: 1 }} onClick={() => onStreamEnd(stream)}>
+              Stop Radio
+            </Button>
+          )}
+        </Flex>
+      </Box>
+    </Modal>
+  );
+}
+
+export default StartStreamModal;