react-bootstrap#Row JavaScript Examples

Footer = () => {
   return (
      <footer>
         <Container>
            <Row>
               <Col className="text-center py-3">
                  Copyright &copy; Library {new Date().getFullYear()}
               </Col>
            </Row>
         </Container>
      </footer>
   );
}

render() {
        return (
            <Form.Group as={Row}>
                <Form.Label column sm='3' htmlFor={this.props.name}>
                    {this.props.label}
                </Form.Label>
                <Col className={this.props.fieldClass}>
                    <textarea
                        ref={this.props.name}
                        rows={this.props.rows}
                        className='form-control'
                        id={this.props.name}
                        placeholder={this.props.placeholder}
                        value={this.props.value}
                        onChange={this.props.onChange}
                        onBlur={this.props.onBlur}
                    />
                    {this.props.validationMessage ? (
                        <span className='help-block'>{this.props.validationMessage} </span>
                    ) : null}
                </Col>
                {this.props.children}
            </Form.Group>
        );
    }

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/admin">
          <NoticeForm />
        </Route>
        <Route path="/">
          <Container fluid="true" className="mt-5 pt-2">
            <Row>
              <Col md="8" className="mb-3">
                  <VideoPart />
              </Col>
              <Col md="4">
                  <ChartPart />
              </Col>
            </Row>
          </Container>
        </Route>
      </Switch>
    </Router>
  );
}

render() {
    return (
      <React.Fragment>
        <div className="mx-2">
          <Row className="pt-4">
            <Col md="12">
              <SystemStatistics stats={this.props.stats} />
            </Col>
            <Col md="12">
              <YourStatistics stats={this.props.stats} />
            </Col>
          </Row>
        </div>
      </React.Fragment>
    );
  }

render() {
		return (
			<div className="app flex-row align-items-center">
				<Card>
					<Row className="justify-content-center">
						<Col md="6">
							<div className="clearfix">
								<h1 className="float-left display-3 mr-4">404</h1>
								<h4 className="pt-3">Oops! You're lost.</h4>
								<p className="text-muted float-left">The page you are looking for was not found.</p>
								<Button className={'mb-4'} color="info" onClick={() => {
									this.props.history.push('/')
								}}>Get back on the right path</Button>
							</div>

						</Col>
					</Row>
				</Card>
			</div>
		);
	}

function App() {
  return (
    <Container className={"vh-100"} fluid>
      <StateProvider>
        <NNStateProvider>
          <ModelStateProvider>
            <Row className={"headerContainer"}>
              <HeaderContainer />
            </Row>
            <Row className={"contentContainer"}>
              <ContentContainer />
            </Row>
            <WidgetContainer />
          </ModelStateProvider>
        </NNStateProvider>
      </StateProvider>
    </Container>
  );
}

render() {
        let uiBuildNumber = process.env.REACT_APP_BUILD_NUMBER || 'dev';
        
        let apiBuildNumber = this.props.version ? this.props.version.apiBuildNumber : '';
        let apiBuildNumberLabel = null;
        if(apiBuildNumber) {
            apiBuildNumberLabel = <div>API Build Number: <b>{apiBuildNumber}</b></div>;
        }

        let releaseNumber = this.props.version ? this.props.version.releaseNumber : '';
        let releaseNumberLabel = null;
        if(releaseNumber) {
            releaseNumberLabel = <div>Realease Number: <b>{releaseNumber}</b></div>;
        }

        return(
            <div>
                <Grid fluid={true} style={footerGridStyle}>
                    <Row>
                        <Col md={8} mdOffset={2} style={mainColStyle}>
                            <div>UI Build Number: <b>{uiBuildNumber}</b></div>
                            {apiBuildNumberLabel}
                            {releaseNumberLabel}
                        </Col>
                    </Row>
                </Grid>    
            </div>
        );
    }

GithubIssue = ({ issue }) => {
  return (
    <Col className={`${styles.column} py-2 px-3 m-2 rounded`}>
      <Row className={`${styles.item_container}`}>
        <NavLink href={issue.html_url}>{issue.title}</NavLink>
      </Row>
      <Row className="d-flex align-items-center">
        <Col xs="auto" className={`${styles.numbers}`}>
          <span className="me-2">
            <IssueIcon />
          </span>
          {issue.state}
        </Col>
        <Col xs="auto" className={`${styles.numbers}`}>#{issue.number}</Col>
        <Col xs="auto" className={`me-3 ${styles.numbers}`}>
          <span className="me-2">
            <LikeIcon />
          </span>
          {issue.reactions['+1']}
        </Col>
        <Col xs="auto" className={`me-2 ${styles.numbers}`}>
          <span className="me-2">
            <CommentIcon />
          </span>
          {issue.comments}
        </Col>
      </Row>
    </Col>
  );
}

LeftAuth = () => {
  return (
    <>
      <div className="component-logo">
        <Container>
          <Row className="no-gutters">
            <Col md={12} className="logo-arka">
              <img src={logoArka} alt="logo-arka" />
            </Col>
            <Col md={12} className="logo-human-report">
              <img src={humanReport} alt="logo-human-report" />
            </Col>
            <Col md={12} className="title-hire">
              <Row className="no-gutters">
                <Col md={2}></Col>
                <Col md={8}>
                  <p className="hire">
                    Hire Expert freelancers for any job, online
                  </p>
                  <p className="hire-small">
                    Millions of small businesses use Freelancer to turn their
                    ideas into reality.
                  </p>
                </Col>
                <Col md={2}></Col>
              </Row>
            </Col>
          </Row>
        </Container>
      </div>
    </>
  );
}

render() {
        return (
            <Fragment>
                <Row>
                    {this.state.boxes.map((box) => {
                        return <HistoryBox box={box}/>;
                    })}
                </Row>
            </Fragment>
        );
    }

ContactDone = () => (
    <Layout>
      <SEO title="お問い合わせ送信完了" />
      <Container fluid="md" style={{width:`80%`}}>
        <Row>
        <Col className="space"></Col>
        </Row>
        <h1 style={{fontSize:`1.2rem`}}>お問い合わせ送信完了</h1>
          <p>お問い合わせありがとうございます。弊社担当者より２～３営業日中にご連絡致します。</p>
        <h2 style={{fontSize:`1.2rem`}}>Message sent Success!</h2>
          <p>Thank you your inquiry. We will contact you by within 2~3 business days.</p>
        <Row>
        <Col className="space"></Col>
        </Row>
      </Container>
    </Layout>
)

function CategoryTopicsContainer(props) {
  const topics = useSelector((state) => state.topic.get.topics);
  const dispatch = useDispatch();
  const prevCurrentCategoryRef = useRef();
  useEffect(() => {
    if (prevCurrentCategoryRef.current?.id || (prevCurrentCategoryRef.current?._id !== props.currentCategory._id)) {
      dispatch(getCategoryTopics({_id: props.currentCategory._id}));
    }
    prevCurrentCategoryRef.current = props.currentCategory;
  });
  const currentCategory = props.currentCategory._id;
  if (topics[currentCategory] !== undefined) {
    return (
      <Row>
        {topics[currentCategory].map((topic) => (
          <Col key={topic._id} md={props.columnValue}>
            <CategoryTopicCard
              entityType="topic"
              category={props.currentCategory}
              topic={topic}
            />
          </Col>
        ))}
      </Row>
    );
  } else {
    return null;
  }
}

function ChangeWorker(props) {
  const onSubmit = (stakeValues) => {
    if (props.onChangeWorker) {
      props.onChangeWorker(stakeValues);
    }
  };
  return <Formik onSubmit={onSubmit} initialValues={{ workerAddress: props.worker ? props.worker : '' }} validationSchema={validationSchema}>
    {({
      handleSubmit,
      handleChange,
      handleBlur,
      values,
      touched,
      isValid,
      errors,
    }) => (
      <Form onSubmit={handleSubmit}>
        <Form.Group as={Row}>
          <Form.Label column sm={2} htmlFor="worker-address">
            Worker
          </Form.Label>
          <Col sm={10}>
            <Form.Control id="worker-address" type="text" name="workerAddress" onChange={handleChange} value={values.workerAddress} />
            <Form.Control.Feedback type="invalid" style={{ display: errors.workerAddress ? 'inline' : 'none' }}>{errors.workerAddress}</Form.Control.Feedback>
          </Col>
        </Form.Group>
        <div className="d-flex justify-content-center">
          <Button type="submit"  disabled={!isValid}>Set worker</Button>
        </div>
      </Form>
    )}
  </Formik>;
}

render() {
        const { vagas, loading } = this.state;
        return (
            <>
            { loading ? <Loader /> : (
                <Container>
                    <div className='p-5'></div>
                    <h3 className="text-white">Vagas Front end</h3>
                    <Row>
                        {vagas.map(vaga => (
                            <Col md={4} key={vaga.id}>
                                <div className='p-3'></div>
                                <Card className="dark shadow-lg" style={{ minHeight: '186px', maxHeight: '224px' }}>
                                    <Card.Text className="text-success">{vaga.state ? 'ABERTA' : 'FECHADA'}</Card.Text>
                                    <Card.Link href="#">
                                        <Card.Title className="text-white">{vaga.title}</Card.Title>
                                    </Card.Link>
                                    <div className="y">{vaga.labels.map(label => (
                                        <Card.Title key={label.name} style={{float:'left'}}>
                                            <div> #{label.name} </div>
                                        </Card.Title>
                                    ))}</div>
                                </Card>
                            </Col>
                        ))}
                    </Row>
                </Container>
            ) }
            </>
        )
    }

render() {
        const { selected, color, colorPickerOn } = this.state;
        const { data, labels } = this.props;
        return (
            <Container>
                <Form inline className="justify-content-center mb-3">
                    <Form.Label className="mr-2">
                        Select Chart Type
                    </Form.Label>
                    <DropdownButton className="chart-type-selector" title={selected} variant="outline-dark" onSelect={this.handleSelect}>
                        {chartTypes.map((item, i) =>
                            <Dropdown.Item key={i} eventKey={item} >{chartTypeIcons[item]}{item}</Dropdown.Item>
                        )}
                    </DropdownButton>
                    <span>&nbsp;</span>
                    <Button as="input" type="button" value="Color Picker" variant="outline-dark" onClick={this.handleColorPicker} />
                    <Button type="button" variant="outline-dark" onClick={this.refreshData} className="ml-1">Refresh</Button>
                    <Modal show={colorPickerOn} onHide={this.handleModalClose}>
                        <Modal.Header closeButton>
                            Color Picker
                        </Modal.Header>
                        <Modal.Body>
                            <SketchPicker
                                width="95%"
                                color={this.state.color}
                                onChangeComplete={this.handleColor}
                            />
                        </Modal.Body>
                    </Modal>
                </Form>
                <Row>
                    <Col>
                        <Charts chartType={selected} chartColor={color} labels={labels} title="Sample" data={data} options={{}} />
                    </Col>
                </Row>
            </Container>
        )
    }

render() {
    return (
      <div className="drawArea" ref="drawArea" >
        <Col className="Container">
        <ReactGridLayout
          layout={this.generateLayout()}
          onLayoutChange={this.onLayoutChange}
          {...this.props}
        >
          <div key={'status'} style={ styles.gridCard }>
            <StatusCard latestData={this.state.data} />
          </div>

          {this.renderGraph('g0', 'Gyro', ['gyroX', 'gyroY', 'gyroZ'])}
          <div key={'g1'} style={ styles.gridCard }>
            <ImageCard isConnected={this.state.wsOpen} />
          </div>
          {this.renderGraph('g2', 'Acc', ['accX', 'accY', 'accZ'])}
          {this.renderGraph('g3', 'Angle', ['angleX', 'angleY', 'angleZ'])}
          {this.renderGraph('g4', 'GyroAngle', ['gyroAngleX', 'gyroAngleY', 'gyroAngleZ'])}
          {this.renderGraph('g5', 'Temperature', ['temp'])}
        </ReactGridLayout>
          <Row xs={2}>
            <Toolbar
              defaultIpAddress={this.ip}
              isConnected={this.state.wsOpen}
              isConnecting={this.state.wsConnecting}
              onConnectDisconnect={this.connectDisconnectClicked}
              />
          </Row>
        </Col>
      </div>
    );
  }

render() {
    if (this.state.showModal) {
      return (
        <JoinRoomModal
          show={this.state.showModal}
          handleClose={this.showJoinRoomModal}
          lang={this.props.room.lang}
          level={this.props.room.lvl}
          sessionId={this.props.room.session_id}
          email={this.props.email}
          username={this.props.username}
          img={this.props.img}
          onUpdate={this.props.onUpdate}
        />
      );
    } else {
      return (
        <Col className="text-center room-box">
          <Row className="room-box-header">
            <p>
              <Badge variant="warning">{this.props.room.lang}</Badge>
              {this.props.room.lvl}
            </p>
          </Row>
          <Row className="room-box-body">
            <ParticipantsList participants={this.props.users} />
          </Row>
          <Row className="room-box-footer">
            <Button variant="primary" onClick={this.showJoinRoomModal}>
              <i className="material-icons">perm_phone_msg</i>Join now!
            </Button>
          </Row>
        </Col>
      );
    }
  }

export default function Settings() {
	return (
		<Row className="mx-1 mt-4">
			<Col md={12} lg={8}>
				<ManageUsersTable />
			</Col>
			<Col md={12} lg={4}>
				<ManageTagsTable />
			</Col>
		</Row>
	);
}

render() {
        return (
            <Navbar bg="white" sticky="top" className="py-1 border" style={{ zIndex: 10000 }}>
                <Container>
                    <Navbar.Brand as={Link} className="btn btn-naked-primary rounded-circle text-primary" to="/">
                        <img className="rounded-circle" height="45" width="45" src="/android-chrome-192x192.png" alt="logo" />
                        {/* <FontAwesomeIcon size="lg" icon={faTwitter} /> */}
                    </Navbar.Brand>
                    <Search className="form-inline w-100" />
                    <Row className="ml-auto d-none d-lg-flex justify-content-end w-50">
                        <Link to="/login" className="btn btn-outline-primary rounded-pill px-3 py-2 font-weight-bold">Log in</Link>
                        <Link to="/signup" className="btn btn-primary rounded-pill px-3 py-2 font-weight-bold ml-2">Sign up</Link>
                    </Row>
                </Container>
            </Navbar>
        )
    }

render() {
        const {isAdvancedActive, isBasicActive} = this.state;
        return (
            <div>
              <Row className="toolbar-row">
                <Col lg={4} xs={4}>
                  <div className="h5 page-header left-align-text">Explore and Swap Tokens</div>
                </Col>
                <Col lg={8} xs={8}>
                 <ButtonGroup className={`explore-tokens-toolbar-btngroup`}>
                  <Button className={`explore-toolbar-btn ${isAdvancedActive}`} onClick={this.advancedViewSelected}>
                    Advanced
                  </Button>
                  <Button className={`explore-toolbar-btn ${isBasicActive}`} onClick={this.basicViewSelected}>
                    Basic
                  </Button>
                 </ButtonGroup>
                </Col>
              </Row>
            </div>
            )
    }

function Posts() {
    return (
        <>
            <div className="section landing-section ">
                <Container>
                    <Row className="d-flex justify-content-center">
                        <Col lg="4" md="12" className="text-center mb-3">
                            <Card className="achievement-card">
                                <Card.Img src={atwork} className="card-img" />
                                <Card.Body>
                                    <Card.Title>Undergraduate Roboticists</Card.Title>
                                    <p className="card-info">
                                        Selected after a comprehensive recruitment, sharing our love for
                                        robotics, we build low-cost robust AUV systems.
                                    </p>
                                </Card.Body>
                            </Card>
                        </Col>
                        <Col lg="4" md="12" className="text-center mb-3">
                            <Card className="achievement-card">
                                <Card.Img variant="top" src={desbot} className="card-img" />
                                <Card.Body>
                                    <Card.Title>Ingenious Design & Creativity</Card.Title>
                                    <p className="card-info">
                                        The designing process behind our latest vehicle, Anahita, has
                                        been appreciated at the international level.
                                    </p>
                                </Card.Body>
                            </Card>
                        </Col>
                        <Col lg="4" md="12" className="text-center mb-3">
                            <Card className="achievement-card">
                                <Card.Img variant="top" src={niotwin} className="card-img" />
                                <Card.Body>
                                    <Card.Title>National Competition Winner</Card.Title>
                                    <p className="card-info">
                                        Twice Runners’ Up (2017 & 2019) at the NIOT SAVe, organised by
                                        the National Insitute Of Ocean Technology, Chennai.
                                    </p>
                                </Card.Body>
                            </Card>
                        </Col>

                    </Row>

                </Container>
            </div>

        </>
    )
}

function ActivityCreate(props) {
  const organization = useSelector((state) => state.organization);
  const { teamPermission } = useSelector((state) => state.team);
  const { selectedPlaylist } = useSelector((state) => state.playlist);
  const { permission } = organization;
  const { match } = props;
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(loadPlaylistAction(match.params.projectId, match.params.playlistId));
  }, []);
  useEffect(() => {
    if (Object.keys(teamPermission).length === 0 && selectedPlaylist?.project?.team?.id && organization?.currentOrganization?.id) {
      dispatch(getTeamPermission(organization?.currentOrganization?.id, selectedPlaylist?.project?.team?.id));
    }
  }, [teamPermission, selectedPlaylist, organization?.currentOrganization?.id]);
  return (
    <>
      <div>
        <div className="content-wrapper create-activity">
          <div className="content">
            {/* header */}
            <div className="intro-header">
              <div className="title-line">
                <h2>Edit Resource</h2>
                <div className="line" />
              </div>
              <Link to={`/org/${organization.currentOrganization?.domain}/project/${match.params.projectId}`}>
                <div className="back-playlist">
                  <FontAwesomeIcon icon="arrow-left" />
                  Back to Playlist
                </div>
              </Link>
            </div>
            {/* Tabs */}
            {(Object.keys(teamPermission).length ? teamPermission?.Team?.includes('team:edit-activity') : permission?.Activity?.includes('activity:edit')) ? (
              <Tab.Container id="left-tabs-example" defaultActiveKey="edit">
                <Row>
                  <Col sm={3}>
                    <Nav variant="pills" className="flex-column">
                      <Nav.Item>
                        <Nav.Link eventKey="edit">
                          <FontAwesomeIcon icon="edit" />
                          Edit Activity
                        </Nav.Link>
                      </Nav.Item>
                    </Nav>
                  </Col>
                  <Col sm={9}>
                    <Tab.Content>
                      <Tab.Pane eventKey="edit">
                        <ActivityWizard />
                      </Tab.Pane>
                    </Tab.Content>
                  </Col>
                </Row>
              </Tab.Container>
            ) : <Alert variant="danger" alt="">You are not authorized to edit this activity.</Alert>}
          </div>
        </div>
      </div>
    </>
  );
}

ProfileBackground = ({
    backgrounds,
    selectedBackground,
    customBackground,
    onBackgroundSelected
}) => {
    const { t } = useTranslation();
    const uploadRef = useRef();
    const [localCustomBg, setCustomBg] = useState(
        customBackground ? `/img/bgs/${customBackground}.png` : null
    );
    const [fileError, setFileError] = useState(null);

    return (
        <Panel title={t('Game Board Background')}>
            <Row>
                {backgrounds.map((background) => (
                    <Col
                        sm={4}
                        onClick={() => onBackgroundSelected(background.name, null)}
                        key={background.name}
                    >
                        <img
                            className={classNames('img-fluid', {
                                selected: selectedBackground === background.name
                            })}
                            src={background.imageUrl}
                        />
                        <span className='bg-label'>{background.label}</span>
                    </Col>
                ))}
                <Col sm={4}>
                    <img
                        className={classNames('img-fluid custom-bg', {
                            selected: selectedBackground === 'custom'
                        })}
                        src={localCustomBg}
                        onClick={() => uploadRef.current?.click()}
                    />
                    <Form.Control
                        name='avatar'
                        type='file'
                        accept='image/*'
                        hidden
                        onChange={(event) => {
                            if (
                                !event.currentTarget ||
                                !event.currentTarget.files ||
                                event.currentTarget.files.length === 0
                            ) {
                                return;
                            }

                            const file = event.currentTarget.files[0];

                            if (file.type !== 'image/png' && file.type !== 'image/jpeg') {
                                setFileError('File must be an image');
                                setCustomBg(null);
                            } else if (file.size / 1024 / 1024 > 5) {
                                setFileError('File must be less than 5MB');
                                setCustomBg(null);
                            } else {
                                setCustomBg(URL.createObjectURL(file));
                                onBackgroundSelected('custom', file);
                                setFileError(false);
                            }
                        }}
                        ref={uploadRef}
                    ></Form.Control>
                    {fileError && <span className='text-danger bg-error'>{fileError}</span>}
                    <span className='bg-label'>Custom</span>
                </Col>
            </Row>
        </Panel>
    );
}

render() {
    return (
      <React.Fragment>
        <Card className="card-square text-center">
          <Card.Header as="h5" className="text-left">
            Monitoree Flow Over Time
          </Card.Header>
          <Card.Body className="card-body">
            <Row className="mx-md-5 mx-lg-0">
              {/* Any height: 0px <tr>s are to ensure proper Bootstrap striping. */}
              <Table striped borderless>
                <thead>
                  <tr>
                    <th className="py-0"></th>
                    <th className="py-0"> Last 24 Hours </th>
                    <th className="py-0"> Last 14 Days </th>
                    <th className="py-0"> Total </th>
                  </tr>
                </thead>
                <tbody>
                  <tr style={{ height: '0px' }}></tr>
                  <tr>
                    <td className="py-1 font-weight-bold text-left">
                      <u>INCOMING</u>{' '}
                    </td>
                  </tr>
                  <tr>
                    <td className="text-right">NEW ENROLLMENTS</td>
                    <td>{this.data_last_24_hours.new_enrollments}</td>
                    <td>{this.data_last_14_days.new_enrollments}</td>
                    <td>{this.data_total.new_enrollments}</td>
                  </tr>
                  <tr>
                    <td className="text-right">TRANSFERRED IN</td>
                    <td>{this.data_last_24_hours.transferred_in}</td>
                    <td>{this.data_last_14_days.transferred_in}</td>
                    <td>{this.data_total.transferred_in}</td>
                  </tr>
                  <tr style={{ height: '0px' }}></tr>
                  <tr>
                    <td className="py-1 font-weight-bold text-left">
                      <u>OUTGOING</u>{' '}
                    </td>
                  </tr>
                  <tr className="pt-5">
                    <td className="text-right">CLOSED</td>
                    <td>{this.data_last_24_hours.closed}</td>
                    <td>{this.data_last_14_days.closed}</td>
                    <td>{this.data_total.closed}</td>
                  </tr>
                  <tr>
                    <td className="text-right">TRANSFERRED OUT</td>
                    <td>{this.data_last_24_hours.transferred_out}</td>
                    <td>{this.data_last_14_days.transferred_out}</td>
                    <td>{this.data_total.transferred_out}</td>
                  </tr>
                </tbody>
              </Table>
            </Row>
          </Card.Body>
        </Card>
      </React.Fragment>
    );
  }

render() {
		return (
			<div className="login">
				<div className="flex justify-content-center align-items-center">
					<Card className={'w100 mb0'}>
						<Row className="loginForm">
							<Col md={12}>
								<Form noValidate validated={this.state.validated}>
									<h1>Login</h1>
									<p className="text-muted">Sign In to your account</p>
									<FormGroup>
										<InputGroup>
											<InputGroup.Prepend><i className={'fas fa-user'}/></InputGroup.Prepend>
											<Form.Control
												name={'username'}
												className={`textInput`}
												placeholder={'Username'}
												value={this.state.username}
												onChange={this.onInputChange}
												required
											/>
										</InputGroup>
									</FormGroup>
									<FormGroup>
										<InputGroup>
											<InputGroup.Prepend><i className={'fas fa-lock'}/></InputGroup.Prepend>
											<Form.Control
												name={'password'}
												placeholder={'Password'}
												type={'password'}
												value={this.state.password}
												onChange={this.onInputChange}
												required
											/>
										</InputGroup>
									</FormGroup>
									<Row>
										<Col md={12}>
											<Button
												onClick={this.login}
												bsstyle={'primary'}
												disabled={this.validateEmail() === 'error' || this.validatePassword() === 'error' || !this.state.username || !this.state.password}
												className={'pull-right'}
											>Login</Button>
											{this.state.error && <div className={'text-danger'}>{this.state.error}</div>}
										</Col>
									</Row>
								</Form>
							</Col>
						</Row>
					</Card>
				</div>
			</div>
		);
	}

render(){
	    return (
	    	<div style={{backgroundColor:'#C7CCDB'}}>
	        	<Container>
	            	<Row>
	            		<Col align="left">
				        	<NavLink tag={Redirect} to={"/userstaffAdd"}>
				            	<Button	style={{backgroundColor: "#2A324B",color: "white",borderColor: "#2A324B"}}>
					            	Add Staff
					        	</Button>
			            	</NavLink>
			            </Col>
	            	</Row>
		            {/*<Row className="pt-3 pb-3">
		            	<Col md="6"style={{"text-align":"initial"}}>
							Show
							<span style={{"padding":"10px"}}>
								<select value={this.state.show} onChange={this.onChangeshow}>
										<option value="0">All</option>
										<option value="5">5</option>
										<option value="10">10</option>
										<option value="25">25</option>
										<option value="50">50</option>
										<option value="75">75</option>
										<option value="100">100</option>
									</select>
							</span>
		                	Entities
		                </Col>
		            </Row>*/}
		           	<Row >
		           		<Col align="left" className="pt-1">
                			<div>
                				<ReactHTMLTableToExcel  
                    				className="btn btn-secondary"  
                    				table="Data"  
                    				filename="Filtered Students"  
                    				sheet="Sheet1"  
                    				buttonText="EXCEL"
                    				style={{backgroundColor:"#2A324B",color:"white",borderColor:"#2A324B"}} 
                    			/>
                    		</div>
                    	</Col>
                    	<Col>
        					<div align="right">Search:<input type="text" name="search" onChange={this.onChangesearch}/></div>
        				</Col>
	            	</Row>
	            	<br/>
		            <Row>
			            <Table id="Data" responsive striped style={{backgroundColor:'white'}}>
				            <thead style={{backgroundColor:'#2A324B',color:'white'}}>
				                <tr>
				        		    <th>Emp_Id</th>
				                    <th>Emp_Name</th>
				                    <th>Email</th>
				                    <th>Campus</th>
				                    <th>Department</th>
				                    <th>Mobile</th>
				                    <th>Action</th>
				                </tr>
				            </thead>
				            <tbody>
				              	{this.StaffList()}
			                </tbody>
			            </Table>
	            	</Row>
	            </Container>
	        </div>
	    )
	}

ColaboraInfo = () => {
  return (
    <Container>
      <Row>
        <Col md={8}>
          <div style={{ marginBottom: '38px', marginTop: '125px' }}>
            <h2
              style={{ fontFamily: "'Raleway', sans-serif", textAlign: 'start', fontSize: '50px', fontWeight: 'bold' }}
            >
              Comunidad
            </h2>
            <p style={{ fontSize: '22px', textAlign: 'start', marginTop: '5px', color: '#FF3047', fontWeight: '600' }}>
              Colabora + Comparte + Comunica
            </p>
          </div>
          <div style={{ fontSize: '18px', textAlign: 'start', marginBottom: '23px' }}>
            <h4>
              ¿Quieres dar una clase online?, ¿compartir el directorio de negocios locales?, ¿formar parte de un grupo
              creativo para enfrentar la contingencia? Aquí las personas publican recursos, ideas y proyectos para tejer
              una red ciudadana.
            </h4>
            <h4>
              <div>
                Somos <span style={{ color: 'red', fontWeight: 'bold' }}>432</span> personas que hemos subido{' '}
                <span style={{ color: 'red', fontWeight: 'bold' }}>302</span> publicaciones.{' '}
              </div>
            </h4>
          </div>
          <a href="https://frenalacurvamx.typeform.com/to/gYdVBR" target="blank">
            <button
              style={{ textAlign: 'start', paddingLeft: '40px', fontSize: '16px', height: '44px' }}
              className=" column button cta is-rounded primary-btn raised"
            >
              Comparte Contenido
            </button>
          </a>
        </Col>
        <Col>
          <img style={{ marginTop: '100px', marginLeft: '70px' }} src={ForoComunidad} />
        </Col>
      </Row>
    </Container>
  )
}

render() {
    // Renders the chat messages
    const messages = this.state.messages;
    const message = messages.map(item => {
        return (
            <Grid>
                {message}
                <Row className="show-grid">
                    <Col xs={12}>
                        <div className="chatmessage-container">
                            <div key={item.id} className="message-box">
                                <p><strong>{item.username}</strong></p>
                                <p>{item.message}</p>
                                </div>
                                </div>
                            </Col>
                        </Row>
                    </Grid>
                )
            })
            // Renders the input form where the message to be sent is typed.
            return (
                <Grid>
                    <Row className="show-grid">
                        <Col xs={12}>
                        {message}
                        <div className="chat-container">
                            <form onSubmit={this.sendMessage}>
                                <Col xs={5} xsOffset={3}>
                                    <FormControl
                                        type="text"
                                        value={this.state.value}
                                        placeholder="Enter message here"
                                        onChange={this.handleChange}
                                    />
                                </Col>
                                <Col xs={4}>
                                    <input className="btn btn-primary" value="Send" type="submit" />
                                    </Col>
                                    </form>
                                    <h4 className="text-center">Welcome, {this.state.username}</h4>
                                    <h5 className="text-center">Begin chatting here.</h5>
                                </div>
                            </Col>
                        </Row>
                    </Grid>
                )
            }

Stats = (props) => {
  const loading = useMemo(() => {
    return (
      props.valueLocked == null || props.plentyInWallet == null || props.plentyToHarvest == null
    );
  }, [props.plentyInWallet, props.plentyToHarvest, props.valueLocked]);

  return (
    <div className={clsx('p-3', 'bg-themed', styles.container)}>
      <Row className="p-1">
        <Col xs={12}>
          <span className="d-flex font-weight-bold m-0 py-3">
            Your Stats
            <Image className="ml-2" src={greenBullet} />
          </span>
          <hr />
        </Col>
      </Row>

      <Row className="p-1">
        <Col xs={6}>
          <Label
            text={
              loading ? null : (
                <NumericLabel params={currencyOptionsWithSymbol}>
                  {props.valueLocked.toFixed(0)}
                </NumericLabel>
              )
            }
            subText={'Total value locked'}
            icon={dollar}
            iconClass={'mt-1'}
            className={'pt-1'}
          />
        </Col>
        <Col xs={6}>
          <Label
            text={loading ? null : `${props.plentyToHarvest?.toFixed(5)}`}
            subText={'PLENTY to harvest'}
            icon={plentyToHarvest}
            iconClass={'mt-1'}
          />
        </Col>
      </Row>

      <hr className="mt-0" />
      <Row className="p-1">
        <Col xs={6}>
          <Label
            text={loading ? null : `${props.plentyInWallet?.toFixed(5)}`}
            subText={'PLENTY in wallet'}
            icon={plentyInWallet}
            iconClass={'mt-1'}
          />
        </Col>
        <Col xs={6}>
          <Label
            text={loading ? null : `${props.xplentyBalance?.toFixed(5)}`}
            subText={'xPLENTY in wallet'}
            icon={xplentyIcon}
            iconClass={'mt-1'}
          />
        </Col>
      </Row>
      <Row className="p-1 mt-1">
        <Col>
          <Button
            onClick={props.harvestAll}
            color={'primary'}
            className={'w-100'}
            disabled={false}
            loading={props.harvestAllOperations.loading}
          >
            Harvest all
          </Button>
        </Col>
      </Row>
    </div>
  );
}