https://www.superctf.com/dist/components/ErrorModal.js

1import { useCallback, useEffect, useRef } from "../../_snowpack/pkg/react.js";
2import styled from "../../_snowpack/pkg/styled-components.js";
3import { TextButton } from "./Buttons.js";
4import { StyledRowPadding } from "./sharedStyled.js";
5import { useErrorModalContext } from "../contexts/ErrorModalProvider.js";
6import { jsx as _jsx } from "../../_snowpack/pkg/react/jsx-runtime.js";
7import { jsxs as _jsxs } from "../../_snowpack/pkg/react/jsx-runtime.js";
8const StyledModal = /*#__PURE__*/styled.div.withConfig({
9  displayName: "ErrorModal__StyledModal"
10})(["display:flex;flex-direction:row;margin-left:30px;margin-right:30px;"]);
11const StyledOverlay = /*#__PURE__*/styled.div.withConfig({
12  displayName: "ErrorModal__StyledOverlay"
13})(["position:absolute;display:flex;flex-direction:column;top:0;left:0;width:100%;height:100%;justify-content:center;align-items:center;background-color:rgb(0,0,0,0.9);z-index:11;"]);
14const StyledFormContainer = /*#__PURE__*/styled.form.withConfig({
15  displayName: "ErrorModal__StyledFormContainer"
16})(["display:flex;flex-direction:column;align-items:center;justify-content:space-between;background-color:white;border:3px solid black;padding:10px;font-size:20px;"]);
17const StyledDisclaimer = /*#__PURE__*/styled.span.withConfig({
18  displayName: "ErrorModal__StyledDisclaimer"
19})(["font-size:12px;text-align:center;"]);
20export const ErrorModal = () => {
21  const overlayRef = useRef(null);
22  const {
23    message: currentErrorMessage,
24    setStoredValue: setErrorMessage
25  } = useErrorModalContext();
26
27  const closeModal = () => {
28    setErrorMessage(undefined);
29  };
30
31  const handleOutsideClick = useCallback(e => {
32    if (e.target.contains(overlayRef.current)) closeModal();
33  }, [closeModal]);
34  useEffect(() => {
35    document.addEventListener("click", handleOutsideClick);
36    return () => {
37      document.addEventListener("click", handleOutsideClick);
38    };
39  }, [handleOutsideClick]);
40
41  if (currentErrorMessage == undefined) {
42    return null;
43  }
44
45  return /*#__PURE__*/_jsxs(StyledOverlay, {
46    role: "alert",
47    ref: overlayRef,
48    children: [/*#__PURE__*/_jsx(StyledModal, {
49      children: /*#__PURE__*/_jsxs(StyledFormContainer, {
50        children: [/*#__PURE__*/_jsxs("h3", {
51          children: ["- ", /*#__PURE__*/_jsx("span", {
52            style: {
53              color: "red"
54            },
55            children: "WARNING"
56          }), " -"]
57        }), /*#__PURE__*/_jsx(StyledRowPadding, {
58          size: "20px"
59        }), /*#__PURE__*/_jsx("p", {
60          style: {
61            textAlign: "center"
62          },
63          children: currentErrorMessage
64        }), /*#__PURE__*/_jsx(StyledRowPadding, {
65          size: "20px"
66        }), /*#__PURE__*/_jsx(StyledDisclaimer, {
67          children: /*#__PURE__*/_jsxs("p", {
68            style: {
69              color: "slategrey"
70            },
71            children: ["If you are having trouble connecting or something isn't working", /*#__PURE__*/_jsx("br", {}), " please tell us in the", " ", /*#__PURE__*/_jsx("a", {
72              target: "_blank",
73              rel: "noreferrer",
74              href: "https://discord.com/invite/D3Ban34",
75              children: "Discord"
76            }), "!"]
77          })
78        }), /*#__PURE__*/_jsx(StyledRowPadding, {
79          size: "10px"
80        })]
81      })
82    }), /*#__PURE__*/_jsx(StyledRowPadding, {
83      size: "10px"
84    }), /*#__PURE__*/_jsx(TextButton, {
85      onClick: closeModal,
86      children: "CLOSE"
87    })]
88  });
89};