74 lines
1.9 KiB
JavaScript
74 lines
1.9 KiB
JavaScript
|
import React, { useState } from "react";
|
||
|
|
import Modal from "react-modal";
|
||
|
|
import {
|
||
|
|
IconButton,
|
||
|
|
Flex,
|
||
|
|
Box,
|
||
|
|
Label,
|
||
|
|
Close,
|
||
|
|
useThemeUI,
|
||
|
|
Text
|
||
|
|
} from "theme-ui";
|
||
|
|
|
||
|
|
function AddPartyMemberButton({ streamId }) {
|
||
|
|
const [isAddModalOpen, setIsAddModalOpen] = useState(false);
|
||
|
|
const { theme } = useThemeUI();
|
||
|
|
|
||
|
|
function openModal() {
|
||
|
|
setIsAddModalOpen(true);
|
||
|
|
}
|
||
|
|
|
||
|
|
function closeModal() {
|
||
|
|
setIsAddModalOpen(false);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Flex sx={{ justifyContent: "center" }} p={2}>
|
||
|
|
<IconButton aria-label="Add Party Member" onClick={openModal}>
|
||
|
|
<svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
height="24"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
width="24"
|
||
|
|
fill="currentcolor"
|
||
|
|
>
|
||
|
|
<path d="M0 0h24v24H0V0z" fill="none" />
|
||
|
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4 11h-3v3c0 .55-.45 1-1 1s-1-.45-1-1v-3H8c-.55 0-1-.45-1-1s.45-1 1-1h3V8c0-.55.45-1 1-1s1 .45 1 1v3h3c.55 0 1 .45 1 1s-.45 1-1 1z" />
|
||
|
|
</svg>
|
||
|
|
</IconButton>
|
||
|
|
</Flex>
|
||
|
|
<Modal
|
||
|
|
isOpen={isAddModalOpen}
|
||
|
|
onRequestClose={closeModal}
|
||
|
|
style={{
|
||
|
|
overlay: { backgroundColor: "rgba(0, 0, 0, 0.73)" },
|
||
|
|
content: {
|
||
|
|
backgroundColor: theme.colors.background,
|
||
|
|
top: "50%",
|
||
|
|
left: "50%",
|
||
|
|
right: "auto",
|
||
|
|
bottom: "auto",
|
||
|
|
marginRight: "-50%",
|
||
|
|
transform: "translate(-50%, -50%)"
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Box>
|
||
|
|
<Label p={2}>Other people can join using your ID (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧</Label>
|
||
|
|
<Box p={2} bg="hsla(230, 20%, 0%, 20%)">
|
||
|
|
<Text>{streamId}</Text>
|
||
|
|
</Box>
|
||
|
|
<Close
|
||
|
|
m={1}
|
||
|
|
sx={{ position: "absolute", top: 0, right: 0 }}
|
||
|
|
onClick={closeModal}
|
||
|
|
/>
|
||
|
|
</Box>
|
||
|
|
</Modal>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default AddPartyMemberButton;
|