react-bootstrap#Col JavaScript Examples

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

ViewDeck = ({ deck }) => {
    const dispatch = useDispatch();

    const handleDeleteClick = () => {
        dispatch(deleteDeck(deck));
    };
    const handleEditClick = () => {
        dispatch(navigate('/decks/edit'));
    };

    return (
        <Panel title={deck?.name}>
            <Col xs={12} className='text-center'>
                <ButtonGroup>
                    <button className='btn btn-primary' onClick={handleEditClick}>
                        Edit
                    </button>

                    <ConfirmButton onClick={handleDeleteClick}>
                        <Trans>Delete</Trans>
                    </ConfirmButton>
                </ButtonGroup>
            </Col>
            <DeckSummary deck={deck} />
        </Panel>
    );
}

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 ContentContainer() {
  return (
    <>
      <Col className="summaryContainer" lg={1}>
        {/* <SummaryContainer /> */}
        <RightColumnContainer />
      </Col>
      <Col className="mainColumnContainer" lg={6}>
        <MainColumnContainer />
      </Col>
      <Col className="rightColumnContainer" lg={1}></Col>
    </>
  );
}

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

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

Stats = () => (
  <Container>
    <Helmet>
      <title>Cosmos validators statistics | Cosmoscan</title>
      <meta
        name="description"
        content="Check out the list of Cosmoshub validators and their stats."
      />
      <meta
        itemProp="description"
        content="Check out the list of Cosmoshub validators and their stats."
      />
      <meta
        property="og:description"
        content="Check out the list of Cosmoshub validators and their stats."
      />
      <meta
        name="twitter:description"
        content="Check out the list of Cosmoshub validators and their stats."
      />
    </Helmet>

    <Row>
      <Col>
        <ValidatorsTable />
      </Col>
    </Row>
  </Container>
)

function CardCourse({ title, description, icon, url, color }) {

  const history = useHistory();

  function handleClick() {
    history.push(url);
  }

  return (
    <Col md='4' style={{ padding: '15px' }} >
      <Card className={['dark', color, 'shadow'].join(' ')} bg="dark" text="white">
        <Card.Body className="text-white">
          <Card.Title className={color}>
            <h3>{title}</h3>
          </Card.Title>
          <Image fluid={true} src={icon} />
          <h5>{description}</h5>
          <Button
            onClick={handleClick}
            variant='dark'
          >
            <h5 style={{ margin: 0 }} >EM BREVE</h5>
          </Button>
        </Card.Body>
      </Card>
    </Col>
  );
}

function PlotSelectionTabContent({
    loading,
    loadInfo,
    selectedPlots,
    onRowsSelected,
    onRowsDeselected,
    ...props
}) {
    return (
        <Col sm={12}>
            <Tab.Content
                unmountOnExit>
                {props.data.map((value, index) => (
                    <Tab.Pane eventKey={index}>
                        <PlotsSelectionTable
                            onRowDoubleClick={(i, row) => loadInfo([row.parcelle])}
                            onRowsSelected={onRowsSelected}
                            onRowsDeselected={onRowsDeselected}
                            selectedKeys={selectedPlots}
                            data={props.data[index]}
                            tablloadingeIndex={index}/>
                        <div style={{height: 25}}>
                            <span style={{ "float": "right" }}>
                                {props.data?.[index]?.length ?? 0} <Message msgId="cadastrapp.parcelle.result.items" msgParams={{ number: props.data?.[index]?.length ?? 0 }} />&nbsp;
                                ({selectedPlots?.length ?? 0} <Message msgId="cadastrapp.parcelle.result.selected" msgParams={{ number: selectedPlots?.length ?? 0}} />)
                            </span>
                            {loading ? <Spinner spinnerName="circle" noFadeIn overrideSpinnerClassName="spinner" /> : null}
                        </div>
                    </Tab.Pane>
                ))}
            </Tab.Content>
        </Col>
    );
}

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

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

GameOptions = ({ formProps }) => {
    const { t } = useTranslation();

    const options = [
        { name: 'allowSpectators', label: t('Allow spectators') },
        { name: 'showHand', label: t('Show hands to spectators') },
        { name: 'muteSpectators', label: t('Mute spectators') },
        { name: 'useGameTimeLimit', label: 'Use a time limit (mins) with sudden death rules' }
    ];

    return (
        <>
            <Form.Group>
                <Form.Row>
                    <Col xs={12} className='font-weight-bold'>
                        <Trans>Options</Trans>
                    </Col>
                    {options.map((option) => (
                        <Col key={option.name} lg='4'>
                            <Form.Check
                                type='switch'
                                id={option.name}
                                label={option.label}
                                inline
                                onChange={formProps.handleChange}
                                value='true'
                                checked={formProps.values[option.name]}
                            ></Form.Check>
                        </Col>
                    ))}
                </Form.Row>
            </Form.Group>
            {formProps.values.useGameTimeLimit && (
                <Form.Row>
                    <Form.Group as={Col} sm={4}>
                        <Form.Label>{t('Time Limit')}</Form.Label>
                        <Form.Control
                            type='text'
                            placeholder={t('Enter time limit')}
                            {...getStandardControlProps(formProps, 'gameTimeLimit')}
                        />
                        <Form.Control.Feedback type='invalid'>
                            {formProps.errors.gameTimeLimit}
                        </Form.Control.Feedback>
                    </Form.Group>
                </Form.Row>
            )}
        </>
    );
}

render() {
        return (
            <div className="p-edit">
                <Form onSubmit={(e) => this.handleSubmit(e)}>
                    <Form.Row>
                        <Form.Group as={Col} controlId="formGridName">
                            <Form.Label>givenName</Form.Label>
                            <Form.Control placeholder="givenName" defaultValue={this.props.profile.givenName} />
                        </Form.Group>

                        <Form.Group as={Col} controlId="formGridSurname">
                            <Form.Label>surname</Form.Label>
                            <Form.Control placeholder="surname" defaultValue={this.props.profile.surname} />
                        </Form.Group>
                    </Form.Row>

                    <Form.Group controlId="formGridUPN">
                        <Form.Label>userPrincipalName</Form.Label>
                        <Form.Control placeholder="userPrincipalName" defaultValue={this.props.profile.userPrincipalName} />
                    </Form.Group>

                    <Form.Row>
                        <Form.Group as={Col} controlId="formGridJob">
                            <Form.Label>jobTitle</Form.Label>
                            <Form.Control placeholder="jobTitle" defaultValue={this.props.profile.jobTitle} />
                        </Form.Group>

                        <Form.Group as={Col} controlId="formGridPhone">
                            <Form.Label>mobilePhone</Form.Label>
                            <Form.Control placeholder="mobilePhone" defaultValue={this.props.profile.mobilePhone} />
                        </Form.Group>

                        <Form.Group as={Col} controlId="formGridLang">
                            <Form.Label>preferredLanguage</Form.Label>
                            <Form.Control placeholder="preferredLanguage"
                                as="select" defaultValue={this.props.profile.preferredLanguage}>
                                <option>English</option>
                                <option>Chinese</option>
                                <option>Hindi</option>
                            </Form.Control>
                        </Form.Group>
                    </Form.Row>

                    <Button variant="primary" type="submit">
                        Submit
                    </Button>
                </Form>
            </div>
        );
    }

render() {
    return (
      <React.Fragment>
        <Card className="card-square text-center">
          <Card.Header as="h5" className="text-left">
            Total Monitorees by Date of Last Exposure By Risk Status
          </Card.Header>
          <Card.Body>
            <Form.Row className="justify-content-md-center">
              <Form.Group
                as={Col}
                md="8"
                onChange={val => {
                  this.setTimeResolution(val.target.value);
                }}>
                <Form.Label>Time Resolution</Form.Label>
                <Form.Control as="select" size="md">
                  <option>Day</option>
                  <option>Week</option>
                  <option>Month</option>
                </Form.Control>
              </Form.Group>
            </Form.Row>
            <ResponsiveContainer width="100%" height={400}>
              <BarChart
                width={500}
                height={300}
                data={this.state.lastExposureDateDate}
                margin={{
                  top: 20,
                  right: 30,
                  left: 20,
                  bottom: 5,
                }}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="name" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Bar dataKey="High" stackId="a" fill="#FA897B" />
                <Bar dataKey="Medium" stackId="a" fill="#FFDD94" />
                <Bar dataKey="Low" stackId="a" fill="#D0E6A5" />
                <Bar dataKey="No Identified Risk" stackId="a" fill="#333" />
                <Bar dataKey="Missing" stackId="a" fill="#BABEC4" />
              </BarChart>
            </ResponsiveContainer>
            <div className="text-secondary text-right">
              <i className="fas fa-exclamation-circle mr-1"></i>
              Illnesses that began
              {` ${this.state.lastExposureDateDate[this.state.lastExposureDateDate.length - 1]?.name} `}
              may not yet be reported
            </div>
          </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>
  );
}

Home = () => (
  <>
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Comfortaa"
    />
    <div style={globalFont}>
      <section style={titleSection}>
        <img src={gourmetLogo} style={headerLogoStyle} alt="Gourmet Inc Logo" />
        <h1 style={headwelcome}>
          Welcome to the Gourmet Inc. Promotions Manager Website
        </h1>
      </section>
      <section style={servicesSection}>
        <Grid style={servicesGrid}>
          <Row style={servicesTitle}>
            <h2 style={servicesGridH2}>Services:</h2>
            <h2 style={servicesGridSub}>What we offer</h2>
          </Row>
          <Row>
            <Col md={4}>
              <img src={cloud} alt="cloud icon" style={cloudIcon} />
              <h4 style={serviceTitle}>Platforms</h4>
              <p style={serviceDescription}>
                We support all social media platforms
              </p>
            </Col>
            <Col md={4}>
              <img src={gear} alt="gear icon" />
              <h4 style={serviceTitle}>Functionality</h4>
              <p style={serviceDescription}>We have many awesome features</p>
            </Col>
            <Col md={4}>
              <img src={heart} alt="heart icon" style={heartIcon} />
              <h4 style={serviceTitle}>Passion</h4>
              <p style={serviceDescription}>
                Made with love by passionate marketers
              </p>
            </Col>
          </Row>
        </Grid>
      </section>
      <section style={pricingDiv}>
        <h1 style={pricingHeader}>Pricing:</h1>
        <h3>We offer the most competitive pricing</h3>
      </section>
      <section style={signUpSection}>
        <Grid style={signUpDiv}>
          <Row>
            <Col style={signUpSectionCol}>
              <h2 style={signUpHeader}>Sign up for a FREE trial</h2>
              <p style={signUpText}>
                The Promotions Manager is launching soon. Leave your email at
                the bottom to get a FREE 60 days trial when we launch
              </p>
              <Form inline>
                <FormControl type="text" placeholder="Enter your email" />
                <div style={btnCtaStyle}>
                  <Button bsStyle="success" style={signUpButtonStyle}>
                    SIGN ME UP
                  </Button>
                </div>
              </Form>
            </Col>
          </Row>
        </Grid>
      </section>
    </div>
  </>
)

export default function Videostreamer(props) {
  const [ping, setPing] = useState(false);

  const pingStream = async () => {
    const response = await fetch(props.src);
    if (response.ok) {
      setPing(true)
    }
    
    return response;
  };
  useEffect(() => {
    setInterval(async () => {
      pingStream()
        .catch((e) => {
          console.error("Stream error", e);
          setPing(false);
          return
        });
      
    }, 30000);
  }, []);

  const handleToast = () => {
    setPing(true);
  };

  return (
    <>
      <Head>
        <link
          href="https://vjs.zencdn.net/7.17.0/video-js.css"
          rel="stylesheet"
        />
      </Head>
      <Script
        src="https://vjs.zencdn.net/7.17.0/video.min.js"
        strategy="afterInteractive"
        onLoad={() =>
          console.log(`script loaded correctly, window.FB has been populated`)
        }
      />
      <Col>
        <video
          autoPlay
          id="my-video"
          className="video-js vjs-big-play-centered vjs-responsive"
          controls
          preload="auto"
          poster={props.poster}
          data-setup='{"fluid": true}'
        >
          <source src={props.src} type={props.type}></source>
          <p class="vjs-no-js">
            To view this video please enable JavaScript, and consider upgrading
            to a web browser that
            <a href="https://videojs.com/html5-video-support/" target="_blank">
              supports HTML5 video
            </a>
          </p>
        </video>
        <Alert
          show={!ping}
          handleToast={handleToast}
        />
      </Col>
    </>
  );
}