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

ProfileCardWidget = () => {
  return (
    <Card border="light" className="text-center p-0 mb-4">
      <div style={{ backgroundImage: `url(${ProfileCover})` }} className="profile-cover rounded-top" />
      <Card.Body className="pb-5">
        <Card.Img src={Profile1} alt="Neil Portrait" className="user-avatar large-avatar rounded-circle mx-auto mt-n7 mb-4" />
        <Card.Title>Neil Sims</Card.Title>
        <Card.Subtitle className="fw-normal">Senior Software Engineer</Card.Subtitle>
        <Card.Text className="text-gray mb-4">New York, USA</Card.Text>

        <Button variant="primary" size="sm" className="me-2">
          <FontAwesomeIcon icon={faUserPlus} className="me-1" /> Connect
        </Button>
        <Button variant="secondary" size="sm">Send Message</Button>
      </Card.Body>
    </Card>
  );
}

SignupLink = () => {
  const { loginWithRedirect } = useAuth0();
  return (
    <OverlayTrigger
      placement="bottom"
      overlay={<Tooltip id="tooltip-signup">Sign Up</Tooltip>}
    >
      <Nav.Link
        onClick={() => loginWithRedirect({ screen_hint: 'signup' })}
      >
        <FontAwesomeIcon icon={faUserPlus} size="lg" />
      </Nav.Link>
    </OverlayTrigger>
  );
}

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>
    )
  }

Header = () => {
  return (
    <div className="header">
      <div className="header__row">
        {/* Left Side Buttons */}
        <div className="header__column">
          <button className="header__newButton">
            <FontAwesomeIcon icon={faPlusSquare} className="icon" />
            New
          </button>
          <button className="header__button">Import</button>
          <button className="header__button">Runner</button>
          <button className="header__button">
            <FontAwesomeIcon icon={faFileImport} className="icon" />
          </button>
        </div>
        {/* Center Content */}
        <div className="header__column">
          <div className="header__titleWrapper">
            <FontAwesomeIcon icon={faThLarge} id="header__titleIcon" />
            <span className="header__titleText">My workspace</span>
            <FontAwesomeIcon
              icon={faChevronDown}
              className="header_titleDropDownIcon"
            />
            <button className="header__button" id="header__inviteButton">
              <FontAwesomeIcon icon={faUserPlus} className="icon" />
              Invite
            </button>
          </div>
        </div>
        {/* Right Side Content */}
        <div className="header__column">
          <div className="header__iconWrapper">
            <FontAwesomeIcon
              icon={faSyncAlt}
              className="header__iconButton active"
            />
            <FontAwesomeIcon
              icon={faSatelliteDish}
              className="header__iconButton"
            />
            <FontAwesomeIcon icon={faWrench} className="header__iconButton" />
            <FontAwesomeIcon icon={faBell} className="header__iconButton" />
            <FontAwesomeIcon icon={faHeart} className="header__iconButton" />
            <FontAwesomeIcon
              icon={faMicrochip}
              className="header__iconButton"
            />
            <button className="header__button" id="header__upgradeButton">
              Upgrade
              <FontAwesomeIcon icon={faChevronDown} style={{ marginLeft: 5 }} />
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

export default function Sidebar({
  authorizeUser, filterFilesInAllAccounts, userList, removeAllAccounts,
  starFilter,
}) {
  const body = document.getElementsByTagName('body')[0];
  const style = getComputedStyle(body);

  const initialState = (style.getPropertyValue('--sidebar-width') === '225px');
  const [expand, setExpand] = useState(initialState);

  const selectedElementList = document.getElementsByClassName('selected');
  const initilaSelected = (selectedElementList.length === 0) ? 'all-files' : selectedElementList[0].id;
  const [selected, setSelected] = useState(initilaSelected);

  const scrollToggle = (ref) => {
    userList.forEach((user) => {
      user.ref.current.style.display = 'none';
    });
    ref.current.style.display = 'block';
    window.scrollTo(0, ref.current.offsetTop - 100);
  };

  const toggleExpand = () => {
    const sidebarItem = document.getElementsByClassName('collapsible');
    Array.from(sidebarItem).forEach((item) => {
      if (expand) {
        item.classList.add('collapse');
        body.style.setProperty('--sidebar-width', '60px');
      } else {
        item.classList.remove('collapse');
        body.style.setProperty('--sidebar-width', '225px');
      }
    });
    setExpand(!expand);
  };

  const handleClick = (target) => {
    setSelected(target);
    let query = 'trashed = false';

    if (target === 'my-drive') {
      query += ' and "me" in owners';
    } else if (target === 'shared') {
      query += ' and not "me" in owners';
    } else if (target === 'starred') {
      starFilter();
      return;
    }
    filterFilesInAllAccounts(query);
  };
  const sidebarClassName = (expand) ? 'collapsible' : 'collapsible collapse';
  return (
    <div className={(expand) ? 'sidebar' : 'sidebar collapse'}>
      <div>
        <button type="button" className="sidebar-add-button" id="signin-btn" onClick={() => authorizeUser()}>
          <FontAwesomeIcon icon={faUserPlus} size="lg" title="Add an Account" />
          {expand ? ' Add Account' : ''}
        </button>
        <button type="button" className="sidebar-remove-button" id="remove-btn" onClick={() => removeAllAccounts()}>
          <FontAwesomeIcon icon={faUserSlash} size="lg" title="Remove All Accounts" />
          {expand ? ' Remove All Accounts' : ''}
        </button>
        <button type="button" className={`sidebar-item ${sidebarClassName} ${(selected === 'all-files') ? 'selected' : ''}`} id="all-files" onClick={() => handleClick('all-files')}>
          <FontAwesomeIcon className="sidebar-icon" icon={faHome} size="lg" title="All Files" />
          {expand ? ' All Files' : ''}
        </button>
        <button type="button" className={`sidebar-item ${sidebarClassName} ${(selected === 'my-drive') ? 'selected' : ''}`} id="my-drive" onClick={() => handleClick('my-drive')}>
          <FontAwesomeIcon className="sidebar-icon" icon={faGoogleDrive} size="lg" title="My Drive Files" />
          {expand ? ' My Drive Files' : ''}
        </button>
        <button type="button" className={`sidebar-item ${sidebarClassName} ${(selected === 'shared') ? 'selected' : ''}`} id="shared" onClick={() => handleClick('shared')}>
          <FontAwesomeIcon className="sidebar-icon" icon={faShareSquare} size="lg" title="Shared" />
          {expand ? ' Shared' : ''}
        </button>
        <button type="button" className={`sidebar-item ${sidebarClassName} ${(selected === 'starred') ? 'selected' : ''}`} id="starred" onClick={() => handleClick('starred')}>
          <FontAwesomeIcon className="sidebar-icon" icon={faStar} size="lg" title="Starred" />
          {expand ? ' Starred' : ''}
        </button>

        <div className="sidebar-user-container">
          { userList.map((user) => {
            const { name, picture } = parseIDToken(user.idToken);
            const { ref } = user;
            return (
              <button type="button" className={`sidebar-user ${sidebarClassName}`} key={user.id} onClick={() => scrollToggle(ref)}>
                <img className="sidebar-picture" src={picture} alt="Account profile" />
                {expand ? ` ${name}` : ''}
              </button>
            );
          })}
        </div>
      </div>
      <div className="collapse-container collapsible">
        <button type="button" className="collapse-button" onClick={() => toggleExpand()}>
          <FontAwesomeIcon icon={expand ? faCaretSquareLeft : faCaretSquareRight} size="lg" title={expand ? 'Collapse' : 'Expand'} />
        </button>
      </div>
    </div>
  );
}

Drawer = ({
    open,
    onClose,
    onConnectWallet,
    selectedWeb3Account,
    onLogin,
    onRegister,
    needsRegistration,
    loadingAuthStatus,
    onLogout,
    loggedIn,
    darkTheme,
    onDarkThemeChange,
    selectedLanguage,
    onSelectedLanguageChange,
}) => {
    const container = useRef(null);

    const [icon, setIcon] = useState(faLock);
    const [iconColor, setIconColor] = useState("");
    const [summaryMessageKey, setSummaryMessageKey] = useState("placeholder");
    const [buttonMessageKey, setButtonMessageKey] = useState("placeholder");

    useLayoutEffect(() => {
        if (needsRegistration) {
            setIcon(faUserPlus);
            setIconColor(selectedTheme.primary);
            setSummaryMessageKey("drawer.wallet.connect.register");
            setButtonMessageKey("drawer.wallet.connect.action.register");
        } else if (loggedIn) {
            setIcon(faLockOpen);
            setIconColor(selectedTheme.success);
            setSummaryMessageKey("drawer.wallet.connect.logout");
            setButtonMessageKey("drawer.wallet.connect.action.logout");
        } else if (selectedWeb3Account) {
            setIcon(faLock);
            setIconColor(selectedTheme.error);
            setSummaryMessageKey("drawer.wallet.connect.login");
            setButtonMessageKey("drawer.wallet.connect.action.login");
        } else {
            setIcon(faPlug);
            setIconColor(selectedTheme.primary);
            setSummaryMessageKey("drawer.wallet.connect.summary");
            setButtonMessageKey("drawer.wallet.connect.action.connect");
        }
    }, [loggedIn, needsRegistration, selectedWeb3Account]);

    const handleButtonClick = useCallback(() => {
        if (needsRegistration) {
            onRegister();
        } else if (loggedIn) {
            onLogout();
        } else if (selectedWeb3Account) {
            onLogin();
        } else {
            onConnectWallet();
        }
    }, [
        loggedIn,
        needsRegistration,
        onConnectWallet,
        onLogin,
        onLogout,
        onRegister,
        selectedWeb3Account,
    ]);

    return (
        <RootFlex
            flexDirection="column"
            alignItems="center"
            open={open}
            ref={container}
        >
            <HeaderFlex mb={3}>
                <EllipsizedBox>
                    {selectedWeb3Account ? (
                        getShortenedEthereumAddress(selectedWeb3Account)
                    ) : (
                        <FormattedMessage id="drawer.wallet.connect.header.connect" />
                    )}
                </EllipsizedBox>
                <Box ml={3} minWidth="auto">
                    <CloseIcon icon={faTimes} onClick={onClose} />
                </Box>
            </HeaderFlex>
            <Box mb={3}>
                <Icon icon={icon} color={iconColor} fontSize="40" />
            </Box>
            <Box px={4} mb={3} fontSize="12px" textAlign="center">
                <SummaryMessage>
                    <FormattedMessage id={summaryMessageKey} />
                </SummaryMessage>
            </Box>
            <Box mb={4}>
                <Button onClick={handleButtonClick} loading={loadingAuthStatus}>
                    <FormattedMessage id={buttonMessageKey} />
                </Button>
            </Box>
            <Box width="100%" mb={2}>
                <Settings
                    darkTheme={darkTheme}
                    onDarkThemeChange={onDarkThemeChange}
                    selectedLanguage={selectedLanguage}
                    onSelectedLanguageChange={onSelectedLanguageChange}
                />
            </Box>
            <Box width="100%" mb={2}>
                <Lrc />
            </Box>
            <Box width="100%" mb={2}>
                <Support />
            </Box>
            <Box width="100%" mb={2}>
                <TechnicalResources />
            </Box>
            <Box width="100%" mb={2}>
                <ExchangeInfo />
            </Box>
        </RootFlex>
    );
}

export default function DemoDashboard() {
  return (
    <>
      <LteContentHeader title='Dashboard' />
      <LteContent>
        <Row>
          <Col xs='12' sm='6' md='3'>
            <LteInfoBox icon={faCog} text='CPU Traffic' number='10%' iconColor='info' />
          </Col>
          <Col xs='12' sm='6' md='3'>
            <LteInfoBox icon={faThumbsUp} text='Likes' number='41,410' iconColor='danger' />
          </Col>
          <div className='clearfix hidden-md-up' />
          <Col xs='12' sm='6' md='3'>
            <LteInfoBox icon={faShoppingCart} text='Sales' number='760' iconColor='success' />
          </Col>
          <Col xs='12' sm='6' md='3'>
            <LteInfoBox icon={faUsers} text='New Members' number='2,000' iconColor='warning' />
          </Col>
        </Row>

        <Row>
          <Col lg='3' xs='6'>
            <LteSmallBox title='150' message='New Orders' href='/info' icon={faShoppingBasket} color='info' />
          </Col>
          <Col lg='3' xs='6'>
            <LteSmallBox title='53%' message='Bounce Rate' href='/info' icon={faChartBar} color='success' />
          </Col>
          <Col lg='3' xs='6'>
            <LteSmallBox title='44' message='User Registrations' href='/info' icon={faUserPlus} color='warning' />
          </Col>
          <Col lg='3' xs='6'>
            <LteSmallBox title='65' message='Unique Visitors' href='/info' icon={faChartPie} color='danger' />
          </Col>
        </Row>

        <Row>
          <Col lg='8'>
            <Card>
              <CardHeader className='border-transparent'>
                <CardTitle>Latest Orders</CardTitle>
                <LteCardTools>
                  <Button color='' className='btn-tool' data-card-widget='collapse'>
                    <FontAwesomeIcon icon={faMinus} />
                  </Button>
                  <Button color='' className='btn-tool' data-card-widget='remove'>
                    <FontAwesomeIcon icon={faTimes} />
                  </Button>
                </LteCardTools>
              </CardHeader>
              <CardBody className='p-0'>
                <Table responsive>
                  <thead>
                    <tr>
                      <th>Order ID</th>
                      <th>Item</th>
                      <th>Status</th>
                      <th>Popularity</th>
                    </tr>
                  </thead>

                  <tbody>
                    <tr>
                      <td>OR9842</td>
                      <td>Call of Duty IV</td>
                      <td>
                        <Badge tag='span' color='success'>
                          Shipped
                        </Badge>
                      </td>
                      <td>
                        <div className='sparkbar' data-color='#00a65a' data-height='20'>
                          90,80,90,-70,61,-83,63
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>OR1848</td>
                      <td>Samsung Smart TV</td>
                      <td>
                        <Badge tag='span' color='warning'>
                          Pending
                        </Badge>
                      </td>
                      <td>
                        <div className='sparkbar' data-color='#f39c12' data-height='20'>
                          90,80,-90,70,61,-83,68
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>OR7429</td>
                      <td>iPhone 6 Plus</td>
                      <td>
                        <Badge tag='span' color='danger'>
                          Delivered
                        </Badge>
                      </td>
                      <td>
                        <div className='sparkbar' data-color='#f56954' data-height='20'>
                          90,-80,90,70,-61,83,63
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>OR7429</td>
                      <td>Samsung Smart TV</td>
                      <td>
                        <Badge tag='span' color='info'>
                          Processing
                        </Badge>
                      </td>
                      <td>
                        <div className='sparkbar' data-color='#00c0ef' data-height='20'>
                          90,80,-90,70,-61,83,63
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>OR1848</td>
                      <td>Samsung Smart TV</td>
                      <td>
                        <Badge tag='span' color='warning'>
                          Pending
                        </Badge>
                      </td>
                      <td>
                        <div className='sparkbar' data-color='#f39c12' data-height='20'>
                          90,80,-90,70,61,-83,68
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>OR7429</td>
                      <td>iPhone 6 Plus</td>
                      <td>
                        <Badge tag='span' color='danger'>
                          Delivered
                        </Badge>
                      </td>
                      <td>
                        <div className='sparkbar' data-color='#f56954' data-height='20'>
                          90,-80,90,70,-61,83,63
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>OR9842</td>
                      <td>Call of Duty IV</td>
                      <td>
                        <Badge tag='span' color='success'>
                          Shipped
                        </Badge>
                      </td>
                      <td>
                        <div className='sparkbar' data-color='#00a65a' data-height='20'>
                          90,80,90,-70,61,-83,63
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </Table>
              </CardBody>
            </Card>

            <Row>
              <Col lg='6'>
                <LteDirectChat color='warning'>
                  <CardHeader>
                    <CardTitle>Direct Chat</CardTitle>
                    <LteCardTools>
                      <Badge color='warning' data-toggle='tooltip' title='3 New Messages'>
                        3
                      </Badge>
                      <Button className='btn-tool' color='' data-card-widget='collapse'>
                        <FontAwesomeIcon icon={faMinus} />
                      </Button>
                      <Button
                        color=''
                        className='btn-tool'
                        data-toggle='tooltip'
                        title='Contacts'
                        data-widget='chat-pane-toggle'
                      >
                        <FontAwesomeIcon icon={faComments} />
                      </Button>
                      <Button color='' className='btn-tool' data-card-widget='remove'>
                        <FontAwesomeIcon icon={faTimes} />
                      </Button>
                    </LteCardTools>
                  </CardHeader>
                  <CardBody>
                    <LteDirectChatMessages>
                      <LteDirectChatMsg
                        name='Alexander Pierce'
                        date='23 Jan 2:00 pm'
                        image={user1}
                        message="Is this template really for free? That's unbelievable!"
                      />
                      <LteDirectChatMsg
                        right
                        name='Sarah Bullock'
                        date='23 Jan 2:05 pm'
                        image={user3}
                        message='You better believe it!'
                      />
                      <LteDirectChatMsg
                        name='Alexander Pierce'
                        date='23 Jan 5:37 pm'
                        image={user1}
                        message='Working with AdminLTE on a great new app! Wanna join?'
                      />
                      <LteDirectChatMsg
                        right
                        name='Sarah Bullock'
                        date='23 Jan 6:10 pm'
                        image={user3}
                        message='I would love to.'
                      />
                    </LteDirectChatMessages>
                    <LteDirectChatContacts>
                      <LteContactsList>
                        <LteContactsListItem
                          href='/contacts'
                          image={user1}
                          name='Count Dracula'
                          date='2/28/2015'
                          message='How have you been? I was...'
                        />
                        <LteContactsListItem
                          href='/contacts'
                          image={user7}
                          name='Sarah Doe'
                          date='2/23/2015'
                          message='I will be waiting for...'
                        />
                        <LteContactsListItem
                          href='/contacts'
                          image={user3}
                          name='Nadia Jolie'
                          date='2/20/2015'
                          message="I'll call you back at..."
                        />
                        <LteContactsListItem
                          href='/contacts'
                          image={user5}
                          name='Nora S. Vans'
                          date='2/10/2015'
                          message='Where is your new...'
                        />
                        <LteContactsListItem
                          href='/contacts'
                          image={user6}
                          name='John K.'
                          date='1/27/2015'
                          message='Can I take a look at...'
                        />
                        <LteContactsListItem
                          href='/contacts'
                          image={user8}
                          name='Kenneth M.'
                          date='1/4/2015'
                          message='Never mind I found...'
                        />
                      </LteContactsList>
                    </LteDirectChatContacts>
                  </CardBody>
                  <CardFooter>
                    <Form>
                      <InputGroup>
                        <Input placeholder='Type Message ...' />
                        <InputGroupAddon addonType='append'>
                          <Button color='warning'>Send</Button>
                        </InputGroupAddon>
                      </InputGroup>
                    </Form>
                  </CardFooter>
                </LteDirectChat>
              </Col>
              <Col lg='6'>
                <Card>
                  <CardHeader>
                    <CardTitle>Latest Members</CardTitle>
                    <LteCardTools>
                      <Badge color='danger'>8 New Members</Badge>
                      <Button className='btn-tool' color='' data-card-widget='collapse'>
                        <FontAwesomeIcon icon={faMinus} />
                      </Button>
                      <Button color='' className='btn-tool' data-card-widget='remove'>
                        <FontAwesomeIcon icon={faTimes} />
                      </Button>
                    </LteCardTools>
                  </CardHeader>
                  <CardBody className='p-0'>
                    <LteUsersList>
                      <LteUsersListItem image={user1} href='/users' name='Alexander Pierce' date='Today' />
                      <LteUsersListItem image={user8} href='/users' name='Norman' date='Yesterday' />
                      <LteUsersListItem image={user7} href='/users' name='Jane' date='12 Jan' />
                      <LteUsersListItem image={user6} href='/users' name='John' date='12 Jan' />
                      <LteUsersListItem image={user2} href='/users' name='Alexander' date='13 Jan' />
                      <LteUsersListItem image={user5} href='/users' name='Sarah' date='14 Jan' />
                      <LteUsersListItem image={user4} href='/users' name='Nora' date='15 Jan' />
                      <LteUsersListItem image={user3} href='/users' name='Nadia' date='15 Jan' />
                    </LteUsersList>
                  </CardBody>
                </Card>
              </Col>
            </Row>
          </Col>
          <Col lg='4'>
            <LteInfoBox icon={faTag} text='Inventory' number='5,200' bgColor='warning' />
            <LteInfoBox icon={faHeart} text='Mentions' number='92,050' bgColor='success' />
            <LteInfoBox icon={faCloudDownloadAlt} text='Downloads' number='114,381' bgColor='danger' />
            <LteInfoBox icon={faComment} text='Direct Messages' number='163,921' bgColor='info' />
            <Card>
              <CardHeader className='border-0'>
                <CardTitle>Online Store Overview</CardTitle>
                <LteCardTools>
                  <Button className='btn-tool' color=''>
                    <FontAwesomeIcon icon={faDownload} />
                  </Button>
                  <Button color='' className='btn-tool'>
                    <FontAwesomeIcon icon={faBars} />
                  </Button>
                </LteCardTools>
              </CardHeader>
              <CardBody>
                <div className='d-flex justify-content-between align-items-center border-bottom mb-3'>
                  <p className='text-success text-xl'>
                    <FontAwesomeIcon icon={faRedo} />
                  </p>
                  <p className='d-flex flex-column text-right'>
                    <span className='font-weight-bold'>
                      <FontAwesomeIcon icon={faArrowUp} className='text-success' />
                      12%
                    </span>
                    <span className='text-muted'>CONVERSION RATE</span>
                  </p>
                </div>
                <div className='d-flex justify-content-between align-items-center border-bottom mb-3'>
                  <p className='text-warning text-xl'>
                    <FontAwesomeIcon icon={faShoppingCart} />
                  </p>
                  <p className='d-flex flex-column text-right'>
                    <span className='font-weight-bold'>
                      <FontAwesomeIcon icon={faArrowUp} className='text-warning' /> 0.8%
                    </span>
                    <span className='text-muted'>SALES RATE</span>
                  </p>
                </div>
                <div className='d-flex justify-content-between align-items-center mb-0'>
                  <p className='text-danger text-xl'>
                    <FontAwesomeIcon icon={faUsers} />
                  </p>
                  <p className='d-flex flex-column text-right'>
                    <span className='font-weight-bold'>
                      <FontAwesomeIcon icon={faArrowUp} className='text-danger' /> 1%
                    </span>
                    <span className='text-muted'>REGISTRATION RATE</span>
                  </p>
                </div>
              </CardBody>
            </Card>
          </Col>
        </Row>
      </LteContent>
    </>
  );
}