@fortawesome/free-solid-svg-icons#faTimes JavaScript Examples

export default function RequestProgress({ clearRequests, uploadRequests }) {
  return (
    <div className="request-progress-container">
      <div className="progress-header">
        Upload Progress
        <button type="button" className="close-progress-button" onClick={() => clearRequests()}>
          <FontAwesomeIcon className="close-progress-button" icon={faTimes} size="lg" />
        </button>
      </div>
      <div className="progress-content-container">
        {uploadRequests.map((requested) => (
          <RequestProgressElement
            requested={requested}
          />
        ))}
      </div>
    </div>
  );
}

TopicsModal = ({ topics, activeDoc, activeTopic }) => {
  const [show, set] = useState(false)

  const onClick = () => set(!show)
  
  useEffect(() => set(false), [activeTopic, activeDoc])

  return (
    <>
      <button className='d-lg-none position-absolute btn btn-light' style={{ zIndex: 11, top: '90%', right: '2rem' }} onClick={onClick}><FontAwesomeIcon icon={show? faTimes : faBars} /></button>
      <div className={`d-lg-none position-absolute bg-white ${!show? 'd-none' : ''}`} style={{ width: '100%', height: '100%', zIndex: 10 }} >
        <Container>
          <TopicLinks topics={topics} activeDoc={activeDoc} activeTopic={activeTopic} />
        </Container>
      </div>
    </>
  );
}

DeckStatusSummary = ({ status }) => {
    let { basicRules, hasConjurations, tenDice, uniques } = status;
    let items = [
        { title: 'Basic rules (deck size)', value: basicRules },
        { title: 'Conjurations included', value: hasConjurations },
        { title: 'Ten dice', value: tenDice },
        { title: 'Phoenixborn unique cards', value: uniques }
    ];

    return (
        <ul className='deck-status-summary'>
            {items.map((item, index) => (
                <li className={item.value ? 'valid' : 'invalid'} key={index}>
                    <FontAwesomeIcon icon={item.value ? faCheck : faTimes} />
                    &nbsp;<Trans>{item.title}</Trans>
                </li>
            ))}
        </ul>
    );
}

library.add(
  faBars,
  faTimes,
  faChevronDown,
  faChevronUp,
  faCalendarAlt,
  faTelegramPlane,
  faTwitter,
  faMediumM,
  faRedditAlien,
  faQuestionCircle,
  faCheck,
  faSearch,
);

render() {
    return (
      <ContentBetween>
        {this.props.children}
          <AlignMiddle>
            <FontAwesomeIcon
              onClick={this.callRemoveFunction}
              icon={faTimes}
            />
          </AlignMiddle>
      </ContentBetween>
    )
  }

// Register the FontAwesome icons.
library.add(
  faArrowFromLeft,
  faArrowToRight,
  faCheck,
  faEquals,
  faKey,
  faQuestion,
  faThumbtack,
  faTimes
);

render() {
    return (
      <>
        {this.state.data ? (
          <>
            <ModalImpl
              show={this.state.showModal}
              closeFunction={this.closeModal}
              submitFunction={this.deleteCommunity}
              title={`Delete community ${this.state.data.name}`}
              body={`Are you sure you want to delete this community?`}
              submitButtonVariant={'danger'}
              submitText={'Delete'}
            />
            <Card
              header={
                <ContentBetween>
                  {this.state.data.name}
                  <AlignMiddle>
                    <FontAwesomeIcon
                      icon={faTimes}
                      onClick={this.openModal}
                    />
                  </AlignMiddle>
                </ContentBetween>
              }
              subtitle={this.state.data.district}
            />
          </>
        ) : ''}
      </>
    )
  }

function displayList(props, onClickFunc) {
    return (
        <div className="imagemap-modal">
            <div className="header">
                <b>{props.area.label}</b>
                <button onClick={props.handleClose}>
                    <FontAwesomeIcon icon={faTimes}/>
                </button>
            </div>
            <div className="contents">
                {getContentsHtml(props.area.contents, onClickFunc)}
            </div>
        </div>
    )
}

render() {
    let { isOpened, closeSideDrawer } = this.props;
    const { theme, toggle } = this.context;

    return (
      <section
        data-testid="side-drawer-menu"
        className={`${styles["side-drawer"]} ${
          isOpened ? styles["side-drawer--opened"] : ""
        }`}
      >
        <button
          className={styles["side-drawer__closer"]}
          onClick={closeSideDrawer}
          type="button"
          aria-label="Toggle side drawer"
          title="Close Side Menu"
          data-testid="drawer-closer"
        >
          <FontAwesomeIcon icon={faTimes} size="2x" />
        </button>
        <ul
          data-testid="side-drawer-list"
          className={`${styles["side-drawer__list"]} list-unstyled`}
        >
          {this.renderNavbarLinks()}
        </ul>
        <div className="text-center theme-toggler">
          <ThemeButton toggle={toggle} theme={theme} />
        </div>
      </section>
    );
  }

function displayItem(props, item, returnFunc) {
    return (
        <div className="imagemap-modal">
            <div className="header">
                <button onClick={returnFunc}>
                    <FontAwesomeIcon icon={faArrowLeft}/>
                </button>
                <b>{item.title}</b>
                <button onClick={props.handleClose}>
                    <FontAwesomeIcon icon={faTimes}/>
                </button>
            </div>
            <div className="contents">
                <PDFObject url={item.path} />
            </div>
        </div>
    )
}

ContentWrapper = ({ label, handleClose, children }) => (
    <div className="imagemap-modal">
        <div className="header">
            <b>{label}</b>
            <button onClick={handleClose}>
                <FontAwesomeIcon icon={faTimes}/>
            </button>
        </div>
        <div className="contents">
            {children}
        </div>
    </div>
)

render() {
        if (this.map) {
            this.updateMap(true)
        }

        const roomId = this.state.highlighted
        const room = (this.props.rooms || {})[roomId]
        // TODO not lock unvisited rooms for now; this can be a future feature
        const isVisited = true;
        // const isVisited = this.props.visited && this.props.visited[roomId]
        const currentRoomUsers = this.props.users[roomId] || []
        const eventsForRoom = this.props.events.filter(event => event.room === roomId)

        return (
            <div className="map">
                <div className="map-header">
                    {this.getGlobalStats()}
                    <button className="map-close-button" onClick={this.props.handleCloseMap}>
                        <FontAwesomeIcon icon={faTimes} />
                    </button>
                </div>
                <div className="map-area">
                    <div id="d3-map"></div>
                    <MapRoomInfo
                        room={room}
                        events={eventsForRoom}
                        users={currentRoomUsers}
                        isVisited={isVisited}>
                    </MapRoomInfo>
                </div>
            </div>
        )
    }

function Alert({
  type, dismissible, children, onDismiss,
}) {
  return (
    <div className={classNames('alert', { 'alert-dismissible': dismissible }, getAlertClass(type))}>
      <div className="d-flex align-items-start">
        <div className="mr-2">
          <FontAwesomeIcon icon={getAlertIcon(type)} />
        </div>
        <div role="alert" className="flex-grow-1">
          {children}
        </div>
      </div>
      {dismissible && <Button className="close" onClick={onDismiss}><FontAwesomeIcon size="sm" icon={faTimes} /></Button>}
    </div>
  );
}

SideBar = ({ children }) => {
    const [expanded, setExpanded] = useState(false);

    let sidebarClass = classNames('sidebar', {
        expanded: expanded,
        collapsed: !expanded
    });

    let burgerClass = classNames('btn-icon', {
        'float-right': expanded
    });

    let icon = expanded ? faTimes : faBars;

    return (
        <div className={sidebarClass}>
            <a href='#' className={burgerClass} onClick={() => setExpanded(!expanded)}>
                <FontAwesomeIcon icon={icon} />
            </a>
            {expanded && children}
        </div>
    );
}

library.add(
    faArrowAltCircleUp,
    faCog,
    faEdit,
    faEye,
    faEyeSlash,
    faList,
    faPause,
    faPlay,
    faPlus,
    faSearch,
    faTachometerAlt,
    faTimes,
    faTimesCircle,
    faTrash,
    faCheckCircle,
    faStream,
    faSave,
    faExclamationCircle,
    faBullhorn,
    faArrowsAltV,
    faUnlink,
    faQuestionCircle,
    faImages,
    faUpload,
    faCopy,
    faCheck,
    faFile,
    faAward,
    faLink,
    faChevronDown,
    faSignOutAlt,
    faPen,
    faExternalLinkSquareAlt,
    faSpinner,
    faUndo,
    faPlusCircle,
    faAngleDown,
    faLink,
);

render() {
    const {address, weight, idx, addressChanged, weightChanged, poolType, symbol, name} = this.props;
    let removeRow = <FontAwesomeIcon icon={faTimes} className="remove-icon-btn" onClick={()=>this.props.removeTokenRow(idx)}/>;
    if (idx === 0 && poolType === 'any') {
      removeRow = <span/>;
    }
function reserveRatioTooltip(props) {
   return <Tooltip {...props}>
    <div>
    Reserve ratio defines the ratio between the total value of the reserves & the market cap of the pool token.
    </div>
    <div>
    While most pools have a network hub token and a pool token kept in a 50/50 reserve ratio,
    </div>
    <div>
     You can also create pools with an array of reserves in any arbitrary reserve ratio.
    </div>
    <div>
    Provided the sum of all reserves is less than or equal to 100.
    </div>

    </Tooltip>;
}
    let tokenDetails = <span/>;;
    if (symbol && name) {
      tokenDetails = <div>Symbol: {symbol} Name: {name}</div>
    }
    return (
        <Row>
        <Col lg={8}>
        <Form.Group controlId="formBasicEmail">
          <Form.Label>Convertible Reserve Token Address</Form.Label>
          <Form.Control type="text" placeholder="address of the ERC20 token contract" value={address} onChange={this.addressChanged} onBlur={this.addressOrSymbolSet}/>
          <Form.Text className="text-muted">
            {tokenDetails}
          </Form.Text>
        </Form.Group>
        </Col>
        <Col lg={4} className="token-weight-slider-container">
          <div className="slidecontainer">
          <Row>
            <Col lg={8} className="reserve-ratio-field-container">
            Token Reserve Ratio
            </Col>
            <Col lg={4}>
            <Form.Control type="number" value={weight} onChange={this.weightChanged} className="amount-row"/>
            </Col>
            </Row>
            <Row>
            <input type="range" min="0" max="100" value={weight} className="slider"
            id="myRange" onChange={this.weightChanged}/>
            </Row>
          </div>
          {removeRow}
        </Col>
        </Row>
      )
  }

render() {
    const { pool: {currentSelectedPool, poolTransactionStatus, currentViewPoolType}, poolData} = this.props;
     let poolSelectionView = poolData;
     
     if (currentViewPoolType === 'all') {
       poolSelectionView = poolData;
     } else if (currentViewPoolType === 'v1') {
       poolSelectionView = poolData.filter((pool) => (pool.poolVersion === '1'));
     } else {
       poolSelectionView = poolData.filter((pool) => (pool.poolVersion === '2'));
     }
    const {selectedPoolIndex, isError, errorMessage} = this.state;
    const self = this;
    let poolDataList = <span/>;
    if (poolSelectionView.length === 0) {
      poolDataList =  <span/>;
    } else {
      poolDataList =
      <span>
        <ListGroupItem>
          Symbol
        </ListGroupItem>
       {
         poolSelectionView.map(function(poolRow, idx){
         let cellActive = '';
         if (idx === selectedPoolIndex) {
           cellActive = 'cell-active';
         }
        return <ListGroupItem onClick={self.setSelectedPool.bind(self, poolRow, idx)} key={'pool-select-'+idx} className={`select-pool-toolbar ${cellActive}`}>
              {poolRow.symbol}
           </ListGroupItem>
         })
       }</span>

    }
    let selectedPool =  (<div className="loading-spinner">
                          <FontAwesomeIcon icon={faSpinner} size="lg" rotation={270} pulse/>
                        </div>
                        )
    
    if (isNonEmptyObject(currentSelectedPool)) {
      selectedPool  =  <SelectedPool {...this.props} currentSelectedPool={currentSelectedPool} setErrorMessage={this.setErrorMessage} resetErrorMessage={this.resetErrorMessage}/>
    }

    let transactionStatusMessage = <span/>;
    if (isError) {
      transactionStatusMessage = <Alert  variant={"danger"}>
              {errorMessage}
            </Alert>
    }
    if (poolTransactionStatus.type === 'pending') {
      transactionStatusMessage = <Alert  variant={"info"}>
              <FontAwesomeIcon icon={faSpinner} size="lg" rotation={270} pulse/> {poolTransactionStatus.message}
            </Alert>
    }
    if (poolTransactionStatus.type === 'error') {
      transactionStatusMessage = <Alert  variant={"danger"}>
              <FontAwesomeIcon icon={faTimes}/> {poolTransactionStatus.message}
            </Alert>      
    }
    return (
      <div>
      {transactionStatusMessage}
      <div className="app-toolbar-container">
        <Row style={{'marginBottom': '40px'}}>
        <Col lg={2}>
        <ListGroup className="select-pool-group">
          {poolDataList}
        </ListGroup>
        </Col>
        <Col lg={10}>
          {selectedPool}
        </Col>
        </Row>
      </div>
      </div>
      )
  }

render() {
    return (
      <Navbar>
        <div>
          <MenuIcon icon={this.props.menuToggled ? faTimes : faBars} onClick={this.props.onMenuToggle} />
          <Text>MyHome logo</Text>
        </div>
        <div>
          <span className="fa-layers fa-fw">
            <FontAwesomeIcon icon={faBell} color={styles.colors.grey} size="lg" />
            <Text className="fa-layers-counter" color={styles.colors.white} fontSize="2em" backgroundColor={styles.colors.red}>2</Text>
          </span>
          <span>
            <Avatar src="https://http.cat/400" margin="0 10px" width="25px" height="25px" />
            <Text
              fontWeight="500"
              dropdownMargin="0 0 0 -30px"
              dropdown={
                <ItemList>
                  {this.props.currentUser ?
                    <Item onClick={this.doSignOut}>
                      <FontAwesomeIcon icon={faSignOutAlt} />
                      <Text padding="0 0 0 5px">Logout</Text>
                    </Item>
                  :
                    <>
                      <Item onClick={this.goToSignUp}>
                        <FontAwesomeIcon icon={faUserPlus} />
                        <Text padding="0 0 0 5px">Sign Up</Text>
                      </Item>
                      <Item onClick={this.goToLogin}>
                        <FontAwesomeIcon icon={faSignInAlt} />
                        <Text padding="0 0 0 5px">Login</Text>
                      </Item>
                    </>
                  }
                </ItemList>
              }
            >
              {this.props.currentUser ? 'Tony Stark' : 'Guest'}
            </Text>
          </span>
        </div>
      </Navbar>
    )
  }

TabsBar = (props) => {
  const {
    tabs,
    tabIndex,
    handleTabChange,
    handleNewTab,
    handleRemoveTab,
  } = props;

  return (
    <div>
      {/* Tabs Bar */}
      <div className="content__tabBar">
        <div className="content__tabBarRow">
          <div className="content__tabBarColumn" id="content__tabBarTabs">
            <div className="content__tabsRow">
              {/* Tabs */}
              {tabs.map((tab, index) => {
                return (
                  <div
                    key={index}
                    onClick={() => {
                      handleTabChange(index);
                    }}
                    className={
                      index === tabIndex
                        ? "content__requestTab active"
                        : "content__requestTab "
                    }
                  >
                    <span className="content__requestType">{tab.type}</span>
                    {tab.name}
                    <FontAwesomeIcon
                      icon={faTimes}
                      onClick={() => handleRemoveTab(tab)}
                      className="content__requestTabCloseIcon"
                    />
                  </div>
                );
              })}
              <div
                className="content__requestTab"
                id="content__requestTabAddTab"
                onClick={handleNewTab}
              >
                <FontAwesomeIcon icon={faPlus} />
              </div>
            </div>
          </div>
          <div className="content__tabBarColumn content__tabBarOptionsWrapper">
            <input value="DEV" className="content__tabBarSelect" />
            <button className="content__button">
              <FontAwesomeIcon icon={faEye} />
            </button>
            <button className="content__button">
              <FontAwesomeIcon icon={faCog} />
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

CloseIcon = makeFAIcon(faTimes)

library.add(faShoppingBag, faTimes);

library.add(faShoppingBag, faTimes)

library.add(faShoppingBag, faTimes)

Navbar = () => {
  const { isAuthenticated, loginWithRedirect, logout } = useAuth0()
  const [showMenu, setShowMenu] = useState(false)

  const toggleMenu = () => setShowMenu(!showMenu)

  return (
    <nav className="border-b border-gray-300 fixed top-0 inset-x-0 z-10 bg-white">
      <div className="max-w-screen-xl mx-auto px-2 flex flex-col lg:flex-row">
        <div className="flex flex-grow">
          <Link className="px-2 sm:px-3 flex flex-none" to="/">
            <img
              src={GoodHereLogo}
              alt="Good Here Logo"
              className="self-center w-56 h-auto hidden sm:inline"
            />
            <img
              src={GoodHereMark}
              alt="Good Here Logo"
              className="self-center h-8 w-8 sm:hidden"
            />
          </Link>

          <div className="flex flex-grow m-2 sm:mx-8 md:mx-12 xl:mx-16">
            <Search />
          </div>

          <button
            onClick={toggleMenu}
            className="flex-shrink-0 px-2 sm:px-3 lg:hidden"
          >
            <FontAwesomeIcon
              fixedWidth
              size="lg"
              icon={showMenu ? faTimes : faBars}
              className="text-gray-700"
            />
          </button>
        </div>

        <div
          className={classnames(
            "text-md flex-none text-gray-600 flex text-left flex-shrink-0 flex-col mb-2",
            { hidden: !showMenu },
            "lg:flex lg:flex-row lg:items-center lg:mb-0"
          )}
        >
          <NavLink to="/contribute">About</NavLink>
          <NavLink to="/organizations">Startups</NavLink>
          <NavLink to="/capital">Funding</NavLink>
          <a className="mr-1 p-2 hover:text-gray-900" href="https://goodhere.discourse.group/">Community</a>

          {isAuthenticated ? (
            <>
              <NavLink to="/favorites">Favorites</NavLink>
              <button
                className="p-2 hover:text-gray-900 text-left"
                onClick={() => logout()}
              >
                Sign out
              </button>
            </>
          ) : (
              <button
                className="mx-3 px-4 my-2 py-1 border rounded border-grey-600 hover:text-red-900 hover:border-red-800"
                onClick={() => loginWithRedirect()}
              >
                Sign in
              </button>
            )}
        </div>
      </div>
    </nav>
  )
}

library.add(faShoppingBag, faTimes);

function SearchInner(
  { placeholder, value, onChange, onClearClick, className, disabled, ...rest },
  ref
) {
  const cName = `${prefix}-search`;

  const isControlled = useMemo(() => typeof value !== "undefined", []);

  const [searchValue, setSearchValue] = useControlledOrNot("", value);

  const [clearActive, setClearActive] = useState(
    isControlled ? searchValue.length > 0 : false
  );

  if (isControlled !== (typeof value !== "undefined")) {
    throw "Search: Changing from controlled to uncontrolled component and vice versa is not allowed";
  }

  const inputRef = useRef(undefined);

  // Public API
  const focus = () => {
    if (typeof inputRef.current !== "undefined") {
      inputRef.current.focus();
    }
  };

  // Return object with public Api
  useImperativeHandle(ref, () => ({
    focus,
  }));

  const handleChange = (e) => {
    const value = e.target.value;
    setClearActive(value.length > 0);
    if (isControlled === false) {
      setSearchValue(value);
    }
    onChange(value);
  };

  const handleClearClick = () => {
    if (isControlled === false) {
      setSearchValue("");
    }

    setClearActive(false);

    onClearClick();
  };

  return (
    <div
      {...rest}
      className={classNames(
        cName,
        { [`${cName}--disabled`]: disabled },
        className
      )}
    >
      <FontAwesomeIcon icon={faSearch} className={`${cName}__search-icon`} />
      <input
        ref={inputRef}
        type="text"
        className={`${cName}__input`}
        placeholder={placeholder}
        onChange={handleChange}
        disabled={disabled}
        value={searchValue}
      />
      <FontAwesomeIcon
        icon={faTimes}
        className={classNames(`${cName}__clear-icon`, {
          [`${cName}__clear-icon--active`]: clearActive,
        })}
        onClick={handleClearClick}
      />
    </div>
  );
}

Navbar = ({ currentPage, className }) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button
        className={`bg-purple-800 w-16 h-16  text-white flex items-center justify-center rounded-full fixed bottom-0 right-0 mr-1 mb-4 xl:hidden z-40`}
        onClick={() => setIsOpen(!isOpen)}
      >
        {!isOpen ? (
          <>
            <FontAwesomeIcon icon={faLessThan} />{" "}
            <FontAwesomeIcon icon={faGreaterThan} />
          </>
        ) : (
          <FontAwesomeIcon icon={faTimes} size="lg" />
        )}
      </button>
      <aside
        className={classNames(
          "z-20 fixed border-gray-300 border-r-2 overflow-hidden duration-500 bg-white h-full",
          {
            "w-0": !isOpen,
            "w-4/5 border-solid border-r-2": isOpen,
          },
          "xl:w-64 xl:border-solid xl:border-r-2",
          className
        )}
      >
        <nav className="flex flex-col truncate">
          {items.map((item, index) => (
            <Item
              key={index}
              slug={item.slug}
              className={item.className}
              active={item.slug === currentPage}
            >
              {item.text}
            </Item>
          ))}
        </nav>
      </aside>
    </>
  );
}

function LatestPatchNote({ patchNote, onClose }) {
    useEffect(() => {
        document.body.style.overflow = 'hidden';

        return () => (document.body.style.overflow = 'auto');
    }, []);

    return (
        <motion.div
            className="latestPatchNote__overlay"
            onClick={onClose}
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
        >
            <motion.div
                className="latestPatchNote__modal"
                onClick={(e) => e.stopPropagation()}
                initial={{ opacity: 0, y: -100 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -100 }}
            >
                <Row justify="end">
                    <Col>
                        <h1 className="latestPatchNote__title">
                            Nouveautés du{' '}
                            {moment(patchNote.createdAt).format('DD MMMM YYYY')}
                        </h1>
                        <h4 className="latestPatchNote__subtitle">
                            Version {patchNote.version}
                        </h4>
                    </Col>
                    <Col xs="content">
                        <FontAwesomeIcon
                            className="latestPatchNote__close"
                            icon={faTimes}
                            onClick={onClose}
                        />
                    </Col>
                </Row>

                <div className="latestPatchNote__content">
                    <Markdown>{patchNote.content}</Markdown>
                </div>
            </motion.div>
        </motion.div>
    );
}

MovablePanel = ({ children, name, onCloseClick, side, title }) => {
    const key = `${name}-${side}`;
    const savedStyle = localStorage.getItem(key);
    const style = (savedStyle && JSON.parse(savedStyle)) || PopupDefaults[key];

    if (style) {
        if (style.left >= window.innerWidth) {
            style.left = window.innerWidth - 50;
        }

        if (style.top >= window.innerHeight) {
            style.top = window.innerHeight - 50;
        }
    }

    const [position, setPosition] = useState(Object.assign({}, style));
    const popupRef = useRef(null);

    const getStyle = (offset) => {
        const style = {
            left: Math.max(offset.x, 10),
            top: Math.max(offset.y, 50),
            position: 'fixed'
        };

        const popup = $(popupRef.current);

        style.top -= popup.height();
        if (style.top < 50) {
            style.top = 50;
        }

        if (style.left + popup.width() > window.innerWidth) {
            style.left = window.innerWidth - popup.width();
        }

        if (style.top + 50 > window.innerHeight) {
            style.top = window.innerHeight - 50;
        }

        return style;
    };

    const [{ isDragging, dragOffset }, drag] = useDrag({
        item: { name: key, type: ItemTypes.PANEL },
        collect: (monitor) => {
            return {
                isDragging: monitor.isDragging(),
                dragOffset: monitor.getSourceClientOffset()
            };
        },
        end: (_, monitor) => {
            const offset = monitor.getSourceClientOffset();
            const style = getStyle(offset);

            localStorage.setItem(`${key}`, JSON.stringify(style));
        }
    });

    useEffect(() => {
        if (isDragging) {
            let style = getStyle(dragOffset);

            setPosition(style);
        }
    }, [dragOffset, isDragging]);

    let content = (
        <div ref={popupRef}>
            <div ref={drag} className='panel panel-primary' style={position}>
                <div className='panel-heading' onClick={(event) => event.stopPropagation()}>
                    <span className='text-center'>{title}</span>
                    <span className='float-right'>
                        <a className='close-button' onClick={onCloseClick}>
                            <FontAwesomeIcon icon={faTimes} />
                        </a>
                    </span>
                </div>
                {children}
            </div>
        </div>
    );

    return content;
}