reactstrap#Card JavaScript Examples

EducationCard = ({ education }) => {
	return (
		<Fade left duration={2000} >
			<Card className="card-lift--hover shadow mt-4">
				<CardBody>
					<div className="d-flex px-3">
						<div className="pl-4">
							<h5 className="text-info">
								{education.schoolName}
							</h5>
							<h6>{education.subHeader}</h6>
							<Badge color="info" className="mr-1">
								{education.duration}
							</Badge>
							<p className="description mt-3">{education.desc}</p>
							<ul>
								{education.descBullets
									? education.descBullets.map((desc) => {
											return <li key={desc}>{desc}</li>;
									  })
									: null}
							</ul>
						</div>
					</div>
				</CardBody>
			</Card>
		</Fade>
	);
}

render() {
    return (
      <div class="container-fluid">
        <Card className="Rounded p-3">
          <CardSubtitle align="left">Job Fitment</CardSubtitle>
          <hr></hr>
          <br></br>
          <ReactSpeedometer responsive 
         maxValue={100}
         value={this.state.result}
         segments={6}
        />
          <CardText>
            Description : You are {this.state.result} % suitable to the industry with your
            current performance in all the tests conducted by T&P
          </CardText>
        </Card>
      </div>
    );
  }

render(){
    return(
      <div className="CardContainer">
        <Card className="ConfCard">
          <CardBody>

            <CardTitle id="confirmed" tag="h4" className=" mb-2 mb-xl-2 ConfTitle">
              
            </CardTitle>   

            <span className="h8 mb-2 font-weight-bold mb-xl-2 " >
               Casos Confirmados no RS
            </span><br></br>
            <span id="confirmed_atualiza" className="small font-weight-light" >               
            </span>
                                      
          </CardBody>
        </Card>
      </div>
    );
  }

UserCard = ({ user }) => {
  return (
    <Card className='text-center mt-3 mb-4'>
      <img src={user.avatar_url} className=' img-thumbnail' />
      <CardBody>
        <div className='text-primary'>
          Naem: {user.name}
        </div>
        <div className='text-primary'>
          Bio: {user.bio}
        </div>
        <div className='text-primary'>
          Location: {user.location}
        </div>
        <div className='text-primary'>
          Followers: {user.followers}
        </div>
        <div className='text-primary'>
          Available for hire: {user.hireable ? 'Yes' : 'No'}
        </div>
      </CardBody>
    </Card>
  )
}

ShowCard = ({ id, image, summary, name }) => {
  return (
    <div>
      <Link to={`shows/${id}`} style={{ textDecoration: 'none' }}>
        <Card style={{ width: '250px' }}>
          <CardImg top width="100%" src={ image } alt="Show Image" />
          <CardBody>
            <CardTitle tag="h5">{ name }</CardTitle>
            <CardSubtitle tag="h6" className="mb-2 text-muted">{ id }</CardSubtitle>
            <CardText>{ summary }</CardText>
          </CardBody>
        </Card>
      </Link>
    </div>
  );
}

Article = (props) => {
  return (
    <div id="article">
      <Card className="team-thumb" onClick={(e) => handleClick(e, props.url)}>
        <CardImg
          top
          width="100%"
          src={props.img}
          // width="264px"
          alt="Card image cap"
        />
        <CardBody>
          <CardTitle>
            <h3>{props.title}</h3>
          </CardTitle>
        </CardBody>
      </Card>
    </div>
  );
}

render() {
        return (
            <React.Fragment>
                {
                    this.props.reports.map((report, key) =>
                                    <Col key={key} md={4}>
                                        <Card>
                                            <CardBody>
                                                <Media>
                                                    <Media body className="overflow-hidden">
                                                        <p className="text-truncate font-size-14 mb-2">{report.title}</p>
                                                        <h4 className="mb-0">{report.value}</h4>
                                                    </Media>
                                                    <div className="text-primary">
                                                        <i className={report.icon + " font-size-24"}></i>
                                                    </div>
                                                </Media>
                                            </CardBody>

                                            <CardBody className="border-top py-3">
                                                <div className="text-truncate">
                                                    <span className="badge badge-soft-success font-size-11 mr-1"><i className="mdi mdi-menu-up"> </i> {report.rate}</span>
                                                    <span className="text-muted ml-2">{report.desc}</span>
                                                </div>
                                            </CardBody>
                                        </Card>
                                    </Col>
                    )
                }
            </React.Fragment>
        );
    }

ExperienceCard = ({ data }) => {
	return (
		<Col lg="6">
			<Fade left duration={2000}>
				<Card
					style={{ flex: 1 }}
					className="shadow-lg--hover mb-3 shadow border-0 text-center rounded"
				>
					<CardBody className="">
						<img
							src={data.companylogo}
							style={{
								objectFit: "cover",
								left: 0,
								right: 0,
								top: "7rem",
								marginLeft: "auto",
								marginRight: "auto",
								width: "8rem",
								height: "8rem",
								borderRadius: "50%",
							}}
							className="shadow mb-3"
							alt={data.companylogo}
						/>
						<CardTitle tag="h4" className="mb-2">
							{data.company}
						</CardTitle>
						<CardSubtitle tag="h5" className="mb-2">
							{data.role}
						</CardSubtitle>
						<CardSubtitle>{data.date}</CardSubtitle>
						<CardText
							tag="div"
							className="description my-3 text-left"
						>
							{data.desc}
							<ul>
								{data.descBullets
									? data.descBullets.map((desc) => {
											return <li key={desc}>{desc}</li>;
									  })
									: null}
							</ul>
						</CardText>
					</CardBody>
				</Card>
			</Fade>
		</Col>
	);
}

function TalkAbout() {
    console.log(String(team.teamData[0].items[0].image));
    return (
        <>
            <div className="section text-center">
                <Container>
                    {
                        team.teamData.map((section) => {
                            console.log(section);
                            return(
                                <div>
                                    <h1 className="title heading-main">{section.heading}</h1>
                                    <div>
                                        <Row>
                                            {section.items.map((teamMember)=>{
                                                console.log(teamMember);
                                                return(
                                                    <Col lg="3 ml-auto mr-auto" sm="6">
                                                        <Card className="card-profile card-plain card-auv">
                                                            <CardBody>
                                                                <a href="#pablo" onClick={(e) => e.preventDefault()}>
                                                                    <div className="author">
                                                                        <img
                                                                            alt="..."
                                                                            src={require("assets/img/"+ teamMember.image)}
                                                                            className="image-prof"
                                                                        />
                                                                        <></>
                                                                        <CardTitle tag="h4" className="auv-description-primary pt-3">
                                                                            {teamMember.name}
                                                                        </CardTitle>
                                                                        <h6 className="auv-description-primary"> {teamMember.subheading}</h6>
                                                                    </div>
                                                                </a>
                                                            </CardBody>
                                                            <CardFooter className="text-center margin-neg">
                                                                <Button
                                                                    className="btn-just-icon btn-neutral"
                                                                    color="link"
                                                                    href="#pablo"
                                                                    onClick={(e) => e.preventDefault()}
                                                                >
                                                                    <i className="fa fa-facebook flip"/>
                                                                </Button>
                                                                <Button
                                                                    className="btn-just-icon btn-neutral ml-1"
                                                                    color="link"
                                                                    href="#pablo"
                                                                    onClick={(e) => e.preventDefault()}
                                                                >
                                                                    <i className="fa fa-linkedin flip"/>
                                                                </Button>
                                                            </CardFooter>
                                                        </Card>
                                                    </Col>
                                                )
                                            })}
                                        </Row>
                                    </div>
                                </div>
                            )
                        })
                    }
                </Container>
            </div>
        </>
    );
}

// download(id){
    //  var token = "Bearer " + localStorage.getItem("jwt");
    //  let url = '/getpostbyid/' + id;
    // fetch(url,{
    //    headers :{
    //            "Authorization" : token,
    //         }
    // })
		// 	.then(response => {
		// 		response.blob().then(blob => {
		// 			let url = window.URL.createObjectURL(blob);
		// 			let a = document.createElement('a');
		// 			a.href = url;
		// 			a.download = 'employees.json';
		// 			a.click();
		// 		});
		// 		//window.location.href = response.url;
		// });
    // }
    
    render(){
        let peopleCards = this.state.files.map(data => {
       return (
      <Col xs="3" key = {data.musicId} className="col">
       <div className="div">
        <Card>
          <i class="fas fa-file-alt"></i>
          {/* <Button color="danger" className="btn"  onClick={() => this.download(data.musicId)}>Download</Button> */}
          <CardBody className="cbody">
            <CardTitle><h4 className="tag">{data.tag}</h4></CardTitle>
            <CardSubtitle className="name">{data.name}</CardSubtitle>
            <CardText className="description">{data.description}</CardText>
            <Button color="danger" className="btn"  onClick={() => this.delete(data.musicId)}>Delete</Button>
            
          </CardBody>
        </Card>
      </div>
      </Col>
      )
    })
    return (
      <Container fluid="md" className="container">
        <Row xs="3" className="row">
          {peopleCards}
        </Row>
         <ToastContainer
          position="top-center"
          autoClose={5000}
          hideProgressBar={false}
          newestOnTop={false}
          closeOnClick
          rtl={false}
          pauseOnFocusLoss
          draggable
          pauseOnHover
          />
      </Container>
      
    )
    }

LoginRegister = () => {
	const [activeTab, setActiveTab] = useState('1');
	const toggle = (tab) => {
		if (activeTab !== tab) setActiveTab(tab);
	};
	return (
		<div className='desktop-login-reg-container'>
			<Nav pills style={{ padding: '1rem' }}>
				<NavLink
					style={{ borderRadius: '1.25rem' }}
					className={classnames({ active: activeTab === '1' })}
					onClick={() => {
						toggle('1');
					}}
				>
					<h1 className='desktop-register-tab'>Register</h1>
				</NavLink>
				<NavLink
					style={{ borderRadius: '1.25rem' }}
					className={classnames({ active: activeTab === '2' })}
					onClick={() => {
						toggle('2');
					}}
				>
					<h1 className='desktop-login-tab'>Sign In</h1>
				</NavLink>
			</Nav>
			<TabContent activeTab={activeTab}>
				<TabPane tabId='1'>
					<Col xl='13'>
						<Card className='desktop-register-card' style={{ border: 'none' }}>
							<Register />
						</Card>
					</Col>
				</TabPane>

				<TabPane tabId='2'>
					<Col xl='13'>
						<Card className='desktop-login-card' style={{ border: 'none' }}>
							<Login />
						</Card>
					</Col>
				</TabPane>
			</TabContent>
		</div>
	);
}

ProductCard = ({ product, addToCart }) => {
  const [isAdded, setIsAdded] = useState(false);
  console.log("product", product);
  const showAdded = () => {
    setIsAdded(true);
    setTimeout(() => {
      setIsAdded(false);
    }, 2000);
  };
  return (
    <Fragment>
      <Col xs="6" lg="4">
        <Card className="merchCard m-1">
          <CardImg
            top
            width="100%"
            height="auto"
            src={product.fullSizeURL}
            alt="T-shirt"
          />
          <CardBody className="product-card-padding">
            <CardTitle className="h5 text-center">{product.design}</CardTitle>
            <CardText>
              <small className="text-muted">{product.name}</small>
            </CardText>
            <CardText>${product.price}</CardText>
            <button
              className="btn-primary cardBtn"
              size="sm"
              onClick={() => {
                addToCart(product);
                showAdded();
              }}
            >
              {isAdded ? "Added" : "Add to Cart"}
            </button>
          </CardBody>
        </Card>
      </Col>
    </Fragment>
  );
}

render(){
  return (
    <div class="container-fluid">

          <Card color="danger" className="Rounded p-3" >
                <CardTitle align="left">{this.state.gpa}</CardTitle>
                <CardSubtitle align="left">
                  <Row>
                    <Col style={{"padding":"0px"}}>
                        B Tech CGPA 
                    </Col>
                    <Col style={{"textAlign":"end"}}>
                      <Button  style={{"background-color": "rgb(42, 50, 75)"}} onClick={()=>{this.handleModalbtech()}}>Edit</Button> 
                    </Col>
                  </Row>
                  </CardSubtitle>
                  <Modal show={this.state.show} onHide={()=>this.handleModalbtech()} >
                    <Modal.Header closeButton>Edit B.Tech Marks</Modal.Header>
                    <Modal.Body>
                      <form onSubmit={this.onSubmitgpa}>
                        <Row>
                          <Col>
                          <input type="text" name="B.techMarks" value={this.state.gpa}
                               onChange={this.onChangebtech}  />
                          </Col>
                          <Col>
                            <Button type="submit">
                                Submit
                            </Button>
                            {/*<input type={"submit"} value={"Submit"} className={"btn btn-primary"}/>*/}
                          </Col>
                        </Row>
                      </form>
                    </Modal.Body>
                  </Modal>
              </Card>
        </div>

        );
}

render() {


    return (

        <div className="cardContainer">
          <Card>
            <CardBody>

              <CardTitle tag="h4" className=" mb-2 mb-xl-2 font-weight-bold">
                Mapa Rio Grande do Sul
              </CardTitle> 

              </CardBody>

              <Map center={center} zoom={7} maxZoom={9}>

                <TileLayer
                  attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                  url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                />

            <MarkerClusterGroup>
                  {array_obj_confirmed.map(({lat, lng, nome, confirmed, pop_estimada, data}, index) => (
                        <Marker position={[lat, lng]} key={index} icon={new L.NumberedDivIcon({number: confirmed})} attribution="confirmed" >
                            <Popup minWidth={250}>
                              <div className="popUp-container">
                                <div className="popUp-title">{nome}</div>
                                <div className="popUp-body">
                                  <ul>
                                    <li><FontAwesomeIcon icon={faVirus}/> Casos confirmados: {confirmed}</li>
                                    <li><FontAwesomeIcon icon={faUser}/> População Estimada 2019: {pop_estimada}</li>
                                    <li><FontAwesomeIcon icon={faCalendar}/> Data da ultima atualização: {data}</li>  
                                  </ul> 
                                </div>
                              </div>
                            </Popup>
                        </Marker>
                      

                      
                      ))}  
                      </MarkerClusterGroup> 
              </Map>
          </Card> 
        </div>
    );
  }

ApplicantsPage = () => {
  return (
    <div className="container mt-4 mb-4">
      <Jumbotron fluid className="border-bottom rounded-top">
        <Container fluid>
          <h1 className="display-5">Applicants</h1>
          <p className="lead float-right font-weight-bold">
            <strong>Position</strong>: Senior Developer
          </p>
        </Container>
      </Jumbotron>
      <div>
        <Row>
          {/* Map through all the data */}
          {listOfApplicants.map((applicant) => (
            <Col sm="6 mt-4" key={applicant.id}>
              <Card body>
                <CardTitle>
                  <h3>{applicant.name}</h3>
                  <hr />
                </CardTitle>

                <CardText>
                  <Row className="mt-2">
                    <Col sm="6">
                      <strong>Email:</strong>
                    </Col>
                    <Col>{applicant.email}</Col>
                  </Row>
                  <Row className="mt-2">
                    <Col sm="6">
                      <strong>Contact:</strong>
                    </Col>
                    <Col>7{applicant.contact}</Col>
                  </Row>
                  <Row className="mt-2">
                    <Col sm="6">
                      <strong>Time Zone</strong>
                    </Col>
                    <Col>{applicant.timeZone}</Col>
                  </Row>
                  <Row className="mt-2">
                    <Col sm="6">
                      <strong>Availibility</strong>
                    </Col>
                    <Col>{applicant.availability}</Col>
                  </Row>
                </CardText>
                <ButtonToggle color="primary">View Resume</ButtonToggle>
              </Card>
            </Col>
          ))}
          {/* end of data mapping */}
        </Row>
      </div>
    </div>
  );
}

ViewContact = () => {
  const { state } = useContext(ContactContext);
  const { contact } = state;

  return (
    <Container>
      <Row className="mt-5 mb-5">
        <Col md="5" className="offset-md-3">
          <Card className="pt-3 pb-5">
            <CardBody className="text-center ">
              <img
                height="150"
                width="150"
                className="cardImg profile border-danger"
                src={contact?.picture}
              />
              <CardTitle className="text-primary mt-3">
                <h1>{contact?.name}</h1>
              </CardTitle>
              <CardSubtitle>
                <h3>
                  <FaPhone className="mr-2" />
                  {contact?.phoneNumber}
                </h3>
              </CardSubtitle>
              <a
                className="btn btn-primary btn-block"
                target="_blank"
                href={`mailto:{contact?.email}`}
              >
                <FaEnvelope className="icon mr-2" />
                {contact?.email}
              </a>

              <a
                className="btn btn-primary btn-block"
                target="_blank"
                href={`https://maps.google.com/?=${contact?.address}`}
              >
                <FaMapMarkerAlt className="icon mr-2" />
                {contact?.address}
              </a>
            </CardBody>
          </Card>
        </Col>
      </Row>
    </Container>
  );
}

PopperCard = ({ el, poppers }) => {
  const data = el.data()
  let path

  if (!data.isRoot) {
    path = getPath(el).join(' ⟶ ')
  }

  return (
    <Card className="border-dark">
      <CardBody>
        <CardTitle
          tag="h5"
          className="mw-100 mb-4"
          style={{ minWidth: '50vw' }}
        >
          {data.title}&nbsp;
          <span>
            <small className="text-muted">
              ({data.isRoot ? 'ROOT NODE' : path})
            </small>
          </span>
          <CloseButton
            divKey={`popper-${el.id()}`}
            popperKey={el.id()}
            poppers={poppers}
          />
        </CardTitle>
        <CardSubtitle>
          <Row>
            <Col className="mb4">Created By: {data.createdBy}</Col>
            {data.lastUpdatedBy ? (
              <Col className="mb4">Last Updated By: {data.lastUpdatedBy}</Col>
            ) : null}
          </Row>
          <hr />
        </CardSubtitle>
        <CardText tag="div">
          {data.summary ? (
            <>
              <Row>
                <h5>Summary</h5>
              </Row>
              <Row>{data.summary}</Row>
            </>
          ) : null}
          {data.content ? (
            <>
              <hr />
              <Row>{data.content}</Row>
            </>
          ) : null}
          {data.audio ? (
            <>
              <Row>
                <h5>Audio</h5>
              </Row>
              <Row>
                <audio controls>
                <source src={data.audio}/>
                </audio>
              </Row>
            </>
          ) : null}
        </CardText>
      </CardBody>
    </Card>
  )
}

render() {
        return (
            <React.Fragment>
                <div className="page-content">
                    <Container fluid>

                    <Breadcrumbs title="Calendar" breadcrumbItems={this.state.breadcrumbItems} />
                        
                        <Row>
                            <Col xs={12}>
                                <Card>
                                    <CardBody>
                                        <FullCalendar
                                            defaultView="dayGridMonth"
                                            plugins={[BootstrapTheme, dayGridPlugin, interactionPlugin ]}
                                            handleWindowResize={true}
                                            themeSystem="bootstrap"
                                            header={{
                                            left: "prev,next today",
                                            center: "title",
                                            right: "dayGridMonth,dayGridWeek,dayGridDay"
                                            }}
                                            dateClick={this.handleDateClick}
                                            editable={true}
                                            droppable={true}
                                            eventLimit={true}
                                            selectable={true}
                                            events={this.state.calendarEvents}
                                        />
    
                                        <div style={{clear : "both"}}></div>
                                    </CardBody>
                                </Card>
                            </Col>
                        </Row>
                        
                    </Container>
                </div>
            </React.Fragment>
        );
    }

Cards = ({ data: { confirmed, recovered, deaths, lastUpdate } }) => {
    if (!confirmed) {
        return 'Carregando...';
    }
    return (
        <div className={styles.container}>
            <Row className={styles.row} container spacing={3} justify="center">
                <Col sm="4">
                    <Card xs={12} md={3} className={cx(styles.card, styles.infected)}>
                        <CardTitle>CASOS ATIVOS</CardTitle>
                        <CardText variant="h5">
                            <CountUp start={0} end={confirmed.value} duration={2.5} separator="," />
                        </CardText>
                        <CardText color="textSecondary">{new Date(lastUpdate).toDateString()}</CardText>
                        <CardFooter variant="body2">Número de casos ativos de COVID-19</CardFooter>
                    </Card>
                </Col>
                <Col sm="4">
                    <Card xs={12} md={3} className={cx(styles.card, styles.recovered)}>
                        <CardTitle color="textSecondary">RECUPERADOS</CardTitle>
                        <CardText variant="h5">
                            <CountUp start={0} end={recovered.value} duration={2.5} separator="," />
                        </CardText>
                        <CardText color="textSecondary">{new Date(lastUpdate).toDateString()}</CardText>
                        <CardFooter variant="body2">Números de recuperados do COVID-19</CardFooter>
                    </Card>
                </Col>
                <Col sm="4">
                    <Card xs={12} md={3} className={cx(styles.card, styles.deaths)}>
                        <CardTitle color="textSecondary">MORTES</CardTitle>
                        <CardText variant="h5">
                            <CountUp start={0} end={deaths.value} duration={2.5} separator="," />
                        </CardText>
                        <CardText color="textSecondary">{new Date(lastUpdate).toDateString()}</CardText>
                        <CardFooter variant="body2">Número de mortes causadas pelo COVID-19</CardFooter>
                    </Card>
                </Col>
            </Row>
        </div>
    );
}

render() {
    return (
      <div className="animated fadeIn">
        <Row>
          <Col xs="12">
            <Card>
              <CardHeader>
                <i className="fa fa-align-justify"></i><strong>Breadcrumbs</strong>
                <div className="card-header-actions">
                  <a href="https://reactstrap.github.io/components/breadcrumbs/" rel="noreferrer noopener" target="_blank" className="card-header-action">
                    <small className="text-muted">docs</small>
                  </a>
                </div>
              </CardHeader>
              <CardBody>
                <Breadcrumb>
                  <BreadcrumbItem active>Home</BreadcrumbItem>
                </Breadcrumb>
                <Breadcrumb>
                  {/*eslint-disable-next-line*/}
                  <BreadcrumbItem><a href="#">Home</a></BreadcrumbItem>
                  <BreadcrumbItem active>Library</BreadcrumbItem>
                </Breadcrumb>
                <Breadcrumb>
                  {/*eslint-disable-next-line*/}
                  <BreadcrumbItem><a href="#">Home</a></BreadcrumbItem>
                  {/* eslint-disable-next-line*/}
                  <BreadcrumbItem><a href="#">Library</a></BreadcrumbItem>
                  <BreadcrumbItem active>Data</BreadcrumbItem>
                </Breadcrumb>
                <Breadcrumb tag="nav">
                  <BreadcrumbItem tag="a" href="#">Home</BreadcrumbItem>
                  <BreadcrumbItem tag="a" href="#">Library</BreadcrumbItem>
                  <BreadcrumbItem tag="a" href="#">Data</BreadcrumbItem>
                  <BreadcrumbItem active tag="span">Bootstrap</BreadcrumbItem>
                </Breadcrumb>
              </CardBody>
            </Card>
          </Col>
        </Row>
      </div>
    );
  }

function RegisterPage() {
  document.documentElement.classList.remove("nav-open");
  React.useEffect(() => {
    document.body.classList.add("register-page");
    return function cleanup() {
      document.body.classList.remove("register-page");
    };
  });
  return (
    <>
      <ExamplesNavbar />
      <div
        className="page-header"
        style={{
          backgroundImage: "url(" + require("assets/img/login-image.jpg") + ")"
        }}
      >
        <div className="filter" />
        <Container>
          <Row>
            <Col className="ml-auto mr-auto" lg="4">
              <Card className="card-register ml-auto mr-auto">
                <h3 className="title mx-auto">Welcome</h3>
                <div className="social-line text-center">
                  <Button
                    className="btn-neutral btn-just-icon mr-1"
                    color="facebook"
                    href="#pablo"
                    onClick={e => e.preventDefault()}
                  >
                    <i className="fa fa-facebook-square" />
                  </Button>
                  <Button
                    className="btn-neutral btn-just-icon mr-1"
                    color="google"
                    href="#pablo"
                    onClick={e => e.preventDefault()}
                  >
                    <i className="fa fa-google-plus" />
                  </Button>
                  <Button
                    className="btn-neutral btn-just-icon"
                    color="twitter"
                    href="#pablo"
                    onClick={e => e.preventDefault()}
                  >
                    <i className="fa fa-twitter" />
                  </Button>
                </div>
                <Form className="register-form">
                  <label>Email</label>
                  <Input placeholder="Email" type="text" />
                  <label>Password</label>
                  <Input placeholder="Password" type="password" />
                  <Button block className="btn-round" color="danger">
                    Register
                  </Button>
                </Form>
                <div className="forgot">
                  <Button
                    className="btn-link"
                    color="danger"
                    href="#pablo"
                    onClick={e => e.preventDefault()}
                  >
                    Forgot password?
                  </Button>
                </div>
              </Card>
            </Col>
          </Row>
        </Container>
        <div className="footer register-footer text-center">
          <h6>
            © {new Date().getFullYear()}, made with{" "}
            <i className="fa fa-heart heart" /> by Creative Tim
          </h6>
        </div>
      </div>
    </>
  );
}

render() {
    return (
      <div className="IndividualStudent">
        <div className="container-fluid">
          <Card>
            <Collapsible trigger="Student Details">
              <PersonalDetails  login={this.props.match.params.id}/>
            </Collapsible>
          </Card>
          <br/>
          <Card>
            <Collapsible trigger="Academic Details">
            <br></br>
            {console.log(this.props.match.params.id)}
            <Row>
              <Col md="4">
                <TenthMarks tenth={this.props.match.params.id}/>
              </Col>
              <Col md="4">
                <TwelveMarks twe={this.props.match.params.id}/>
              </Col>
              <Col md="4">
                <BtechMarks btech={this.props.match.params.id}/>
              </Col>
            </Row>
            <br></br>
            <Collapsible trigger="More Info">
              <br></br>
              <Row>
                <Col md="4">
                  <Branch brn={this.props.match.params.id}/>
                </Col>
                <Col md="4">
                  <Pass pas={this.props.match.params.id}/>
                </Col>
                <Col md="4">
                  <Section sec={this.props.match.params.id}/>
                </Col>
              </Row>
            </Collapsible>
            </Collapsible>
          </Card>
        </div>
          <div class="container-fluid">
          <Card>
        
              <Collapsible trigger="Job Fitment Curve">
              <Row>
                <Col md="6" className="p-2">
                  <JobFitment jf={this.props.match.params.id} />
                </Col>
                <Col md="6" className="p-2">
                  <CurrentJobS cs={this.props.match.params.id}/>
                </Col>
              </Row>
              </Collapsible>
          
          </Card>
        </div>
        <div class="container-fluid">
          <Card>
              <Collapsible trigger="ARI">
              <ARI ari={this.props.match.params.id}/>
              </Collapsible>
          </Card>
        </div>
          <div class="container-fluid">
            <Card>
              <Collapsible trigger="ARE">
              <Row>
                <Col md="6" className="p-2">
                <Cocubes cid={this.props.match.params.id}/>
                </Col>
                <Col md="6" className="p-2">
                <Amcat aid={this.props.match.params.id}/>
                </Col>
              </Row>
              </Collapsible>
            
            </Card>
          </div>
          <div className="container-fluid">
            <Card>
        
                <Collapsible trigger="TAR">
                <ITA aid={this.props.match.params.id}/>
                </Collapsible>
            
            </Card>
        </div>
        <div className="container-fluid">
          <Card>
              <Collapsible trigger="Placement Analysis">
              <Table className="placements" striped bordered responsive>
                <tbody>
                  <tr>
                    <td md="6">Total Number of Companies: {this.state.noc}</td>
                    <td md="6">Number of written test cleared:{this.state.wtc}</td>
                            </tr>
                            <tr>
                    <td md="6">Number of Companies Attended:{this.state.ce}</td>
                    <td md="6">Number of GD's cleared:{this.state.gdc}</td>
                            </tr>
                            <tr>
                    <td md="6">Number of Companies Eligible:{this.state.nca}</td>
                    <td md="6">Number of technical test cleared:{this.state.ttc}</td>
                  </tr>
                  <tr>
                    <td colspan="2">Number of Offer Letters:{this.state.olf}</td>
                  </tr>
                </tbody>
              </Table>
              <br></br>
              <h6>Placements Analysis</h6>
              <Table className="placementanalysis" responsive>
                <thead>
                  <tr>
                    <th>Company Logo</th>
                    <th>Company Name</th>
                    <th>Attendance</th>
                    <th>Written Test</th>
                    <th>GroupDiscussion</th>
                    <th>Technical Test</th>
                    <th>Personal Interview</th>
                  </tr>
                </thead>
                <tbody>
                  {this.RecordsList()}
                </tbody>
              </Table>
              </Collapsible>
            </Card>
        </div>
        &nbsp;
      </div>
    );
  }

export default function About(){

  return(

    <div className="teste">
      <Header/>
      <div className="conteudoCardAbout">
       <Container fluid={true} >
        <Row noGutters={false}>
          <Col xs="12" sm="12" md="12" xl="12">
            <Card>
              <CardBody>
                <CardTitle className="titulosAbout">
                  Quem somos              
                  <hr className="my-2 mb-5" />
                </CardTitle>    
                <p className="my-2 mb-2 aboutexto"> O Grupo de Trabalho C3-Analytics é formado por uma pequena equipe de professores e alunos de 
                graduação e pós-graduação do Centro de Ciências Computacionais - C3. É parte da frente de ITeCCorona, que desenvolve atividades 
                de pesquisa, extensão e inovação na Universidade Federal do Rio Grande - FURG sobre COVID-19. </p>
                <p className="my-2 mb-2 aboutexto">O principal objetivo do GT C3-Analytics é permitir a visualização e a análise de dados da 
                COVID-19 nas regiões de abrangência da FURG. A equipe responsável pelo desenvolvimento desta plataforma de coleta e visualização
                 de dados é detalhada abaixo. </p>
                <p className="my-2 mb-5 aboutexto">Estes e outros integrantes do GT ainda atuam de forma conjunta com a prefeitura municipal de 
                Rio Grande para implantar a plataforma desenvolvida no portal de serviços relacionados à pandemia do novo Coronavírus e na elaboração
                 de outras análises a serem publicadas no futuro, principalmente ligadas ao sistema de tele-triagem.</p>
                <CardTitle className="titulosAbout mb-2">
                  Equipe de Desenvolvedores
                  <hr className="my-2 mb-5" />  
                </CardTitle>          
                              
              <div className=" text-center ">
              <Container>
                <Row>
                  <Col md="12" sm="12" xl="4"xs="12" py="5" mx="2" >
                    <img class="fotos" src={eduardo} alt="foto1"/>
                    <CardTitle className="TituloTime mt-3">Eduardo Borges</CardTitle>
                    <p className="graduacaoTime my-2 mb-2 text-center ">Dr. em Computação. </p> 
                    <p className="my-2  resumoTime">Coordenador do GT C3-Analytics. Professor do Centro de Ciências Computacionais e 
                     do Programa de Pós-Graduação em Computação. Coordenador do Grupo de Pesquisa em Gerenciamento de Informações.
                    </p>
                    <div className="mb-5">
                    <Button className="Headerlinks" color="link" href="http://lattes.cnpq.br/5851601274050374">
                      <FontAwesomeIcon icon={faGlobeAmericas} />
                    </Button>
                    <Button className="Headerlinks" color="link" href="https://www.linkedin.com/in/enborges/">
                    <FontAwesomeIcon icon={faLinkedin} />
                    </Button> 
                    <Button className="Headerlinks"  color="link" href="https://github.com/enborges">
                      <FontAwesomeIcon icon={faGithub} />
                    </Button>
                    </div>
                                   
                  </Col>
                  <Col md="12" sm="12" xl="4"xs="12" py="5" mx="2" >
                    <img class="fotos" src={glauber} alt="foto9"/>
                    <CardTitle className="TituloTime mt-3">Glauber Gonçalves</CardTitle>
                    <p className="graduacaoTime my-2 mb-2 text-center ">Dr. em Ciências Geodésicas  </p> 
                    <p className="my-2  resumoTime">Professor do Centro de Ciências Computacionais, 
                    coordenador do Laboratório de Tecnologia da Geoinformação. Atua como pesquisador em Sensoriamento Remoto e Fotogrametria
                    </p>
                    <div className="mb-5">
                    <Button className="Headerlinks" color="link" href="http://lattes.cnpq.br/2814370196736373">
                      <FontAwesomeIcon icon={faGlobeAmericas} />
                    </Button>
                    {/* <Button className="Headerlinks" color="link" href="https://www.linkedin.com/in/enborges/">
                    <FontAwesomeIcon icon={faLinkedin} />
                    </Button> 
                    <Button className="Headerlinks"  color="link" href="https://github.com/enborges">
                      <FontAwesomeIcon icon={faGithub} />
                    </Button> */}
                    </div>
                                   
                  </Col>
                  <Col md="12" sm="12" xl="4"xs="12" py="5" mx="5"  >
                  <img class="fotos" src={gabriel} alt="foto2"/>
                    <CardTitle className="TituloTime mt-3">Gabriel Lavoura</CardTitle>
                    <p className="graduacaoTime my-2 mb-2 text-center ">Mestrando em Eng.Comp. </p>
                    <p className="my-2 resumoTime">Empreendedor, trabalha com desenvolvimento há mais de 7 anos,
                     sendo entusiasta em hardware, desenvolvimento Web e Mobile. Atua como pesquisador nas áreas de 
                     Deep Learning e Data Science.  
                    </p>
                    <div className="mb-5">
                    <Button className="Headerlinks" color="link" href="http://lattes.cnpq.br/5616548040095346">
                      <FontAwesomeIcon icon={faGlobeAmericas} />
                    </Button>
                    <Button className="Headerlinks" color="link" href="https://www.linkedin.com/in/gabriellavoura/">
                      <FontAwesomeIcon icon={faLinkedin} />
                    </Button> 
                    <Button className="Headerlinks"  color="link" href="https://github.com/Gabriellavoura">
                      <FontAwesomeIcon icon={faGithub} />
                    </Button>
                    </div>                   
                  </Col>
                  <Col md="12" sm="12" xl="4"xs="12" py="5" mx="2">
                  <img class="fotos" src={vanessa} alt="foto3"/>
                    <CardTitle className="TituloTime mt-3">Vanessa Telles</CardTitle>
                    <p className="graduacaoTime my-2 mb-2 text-center ">Mestranda em Eng.Comp. </p>
                    <p className="my-2 resumoTime">Entusiasta em Design Digital, empreendedora e
                    desenvolvedora Web e Mobile desde 2014. Atua como
                    pesquisadora nas áreas de Data Science e Deep Learning .
                    </p>
                    <div className="mb-5">
                    <Button className="Headerlinks" color="link" href="http://lattes.cnpq.br/3565116360523950">
                      <FontAwesomeIcon icon={faGlobeAmericas} />
                    </Button>
                    <Button className="Headerlinks" color="link" href="https://www.linkedin.com/in/vanessa-telles-da-silva-8ab4b614a/">
                      <FontAwesomeIcon icon={faLinkedin} />
                    </Button> 
                    <Button className="Headerlinks"  color="link" href="https://github.com/vanessatelles">
                      <FontAwesomeIcon icon={faGithub} />
                    </Button>
                    </div>
                
                  </Col> 
                  <Col md="12" sm="12" xl="4"xs="12" py="5" mx="2">
                  <img class="fotos" src={bruna} alt="foto4"/>
                    <CardTitle className="TituloTime mt-3">Bruna Guterres</CardTitle>
                    <p className="graduacaoTime my-2 mb-2 text-center ">Mestranda em Eng.Comp. </p>
                    <p className="my-2 resumoTime">Professora substituta do Centro de Ciências Computacionais - C3.
                     Entusiasta em Visão Computacional e Aprendizado de Máquina. Membro do grupo NAUTEC desde 2015.
                    </p>
                    <div className="mb-5">
                    <Button className="Headerlinks" color="link" href="http://lattes.cnpq.br/2197909913930437">
                      <FontAwesomeIcon icon={faGlobeAmericas} />
                    </Button>
                    <Button className="Headerlinks" color="link" href="https://www.linkedin.com/in/bruna-de-vargas-guterres-07888b129/">
                      <FontAwesomeIcon icon={faLinkedin} />
                    </Button> 
                    {/* <Button className="Headerlinks"  color="link" href="https://github.com/luucasrb">
                      <FontAwesomeIcon icon={faGithub} />
                    </Button> */}
                    </div>                   
                  </Col>
                  <Col md="12" sm="12" xl="4"xs="12" py="5" mx="2">
                  <img class="fotos" src={lucas} alt="foto5"/>
                    <CardTitle className="TituloTime mt-3">Lucas Ribeiro</CardTitle>
                    <p className="graduacaoTime my-2 mb-2 text-center ">Graduando em Eng.Comp. </p>
                    <p className="my-2 resumoTime">Atua como pesquisador nas áreas de Data Science
                     e Blockchain. Entusiasta em Desenvolvimento Web.
                    </p>
                    <div className="mb-5">
                    <Button className="Headerlinks" color="link" href="http://lattes.cnpq.br/1491700382158430">
                      <FontAwesomeIcon icon={faGlobeAmericas} />
                    </Button>
                    <Button className="Headerlinks" color="link" href="https://www.linkedin.com/in/luucasrb/">
                      <FontAwesomeIcon icon={faLinkedin} />
                    </Button> 
                    <Button className="Headerlinks"  color="link" href="https://github.com/luucasrb">
                      <FontAwesomeIcon icon={faGithub} />
                    </Button>
                    </div>                   
                  </Col>
                  <Col md="12" sm="12" xl="4"xs="12" py="5" mx="2">
                  <img class="fotos" src={willian} alt="foto6"/>
                    <CardTitle className="TituloTime mt-3">Willian Lemos</CardTitle>
                    <p className="graduacaoTime my-2 mb-2 text-center ">Graduando em Eng.Comp. </p>
                    <p className="my-2 resumoTime">Desenvolvedor desde 2015 e entusiasta em Redes Neurais.
                     Atua como pesquisador nas áreas de Data Science e Engenharia de dados.
                    </p>
                    <div className="mb-5">
                    <Button className="Headerlinks" color="link" href="http://lattes.cnpq.br/5429651614061510">
                      <FontAwesomeIcon icon={faGlobeAmericas} />
                    </Button>
                    <Button className="Headerlinks" color="link" href="https://www.linkedin.com/in/willian-lemos-4b9121136/">
                      <FontAwesomeIcon icon={faLinkedin} />
                    </Button> 
                    <Button className="Headerlinks"  color="link" href="https://github.com/Willblemos">
                      <FontAwesomeIcon icon={faGithub} />
                    </Button>
                    </div>                   
                  </Col>
                  <Col md="12" sm="12" xl="4"xs="12" py="5" mx="2">
                  <img class="fotos" src={augusto} alt="foto7"/>
                    <CardTitle  className="TituloTime mt-3">Augusto Lamim</CardTitle>
                    <p className="graduacaoTime my-2 mb-2 text-center ">Graduando em Eng.Comp. </p>
                    <p className="my-2 resumoTime">Desenvolvedor full-stack, entusiasta em Tecnologia da
                    Informação.
                    </p>
                    <div className="mb-5">
                    <Button className="Headerlinks" color="link" href="http://lattes.cnpq.br/1925430387887371">
                      <FontAwesomeIcon icon={faGlobeAmericas} />
                    </Button>
                    <Button className="Headerlinks" color="link" href="https://www.linkedin.com/in/augusto-c%C3%A9sar-lamim-martins-de-oliveira-6b93a5168/">
                      <FontAwesomeIcon icon={faLinkedin} />
                    </Button> 
                    <Button className="Headerlinks"  color="link" href="https://github.com/Lastopsop">
                      <FontAwesomeIcon icon={faGithub} />
                    </Button>
                    </div>                   
                  </Col>
                  <Col md="12" sm="12" xl="4"xs="12" py="5" mx="2">
                  <img class="fotos" src={felipe} alt="foto8"/>
                    <CardTitle  className="TituloTime mt-3">Felipe Marques</CardTitle>
                    <p className="graduacaoTime my-2 mb-2 text-center ">Graduando em Eng.Comp. </p>
                    <p className="my-2 resumoTime">Técnico em Informática para Internet pelo IFRS, desenvolvedor
                     desde 2016.  
                    </p>
                    <div className="mb-5">
                    {/* <Button className="Headerlinks" color="link" href="#">
                      <FontAwesomeIcon icon={faGlobeAmericas} />
                    </Button> */}
                    <Button className="Headerlinks" color="link" href="https://www.linkedin.com/in/felipesouzamarques/">
                      <FontAwesomeIcon icon={faLinkedin} />
                    </Button> 
                    <Button className="Headerlinks"  color="link" href="https://github.com/FelpsZMS">
                      <FontAwesomeIcon icon={faGithub} />
                    </Button>
                    </div>                   
                  </Col>                        
                </Row>
              </Container>
            </div>
            <div>
              <Container>
                <Row>
                  <Col md="12" sm="12" xl="12"xs="12" py="5" mx="2">
                  <CardTitle className="titulosAbout">
                  Attribution            
                  <hr className="my-2 mb-5" />
                </CardTitle>    
                <p className="my-2 mb-2 aboutexto">Icons made
                 by <a class="LinkTitle" href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a className="LinkTitle" href="https://www.flaticon.com/" title="Flaticon"> www.flaticon.com</a>.  </p>
                 <p className="my-2 mb-2 aboutexto">Icons fonts made 
                 by <a class="LinkTitle" href="https://fontawesome.com/license/free" title="FontAwesome">FontAwesome</a> from <a className="LinkTitle" href="https://fontawesome.com/" title="Flaticon"> www.fontawesome.com/</a>.  </p>
                 <p className="my-2 mb-2 aboutexto">Graphs  
                 by <a class="LinkTitle" href="https://github.com/PaulLeCam/react-leaflet/blob/master/LICENSE" title="FontAwesome">React-leaflet</a> from <a className="LinkTitle" href="https://github.com/PaulLeCam/react-leaflet" title="Flaticon"> https://github.com/PaulLeCam/react-leaflet</a>.  </p>
                 <p className="my-2 mb-2 aboutexto">Maps clusters 
                 by <a class="LinkTitle" href="https://github.com/yuzhva/react-leaflet-markercluster/blob/master/LICENSE" title="FontAwesome">React-leaflet-markercluster</a> from <a className="LinkTitle" href="https://github.com/yuzhva/react-leaflet-markercluster" title="Flaticon"> https://github.com/yuzhva/react-leaflet-markercluster</a>.  </p>
                
               </Col>
                </Row>
              </Container>
              </div> 

            </CardBody> 
            </Card>

          </Col>
        </Row>
       </Container>
      </div>
      <Footer/>

    </div>

  );
}

CreateJob = () => {
  const { handleSubmit, watch, errors, control, getValues } = useForm({
    mode: "all",
    reValidateMode: "onChange",
  });
  const [selectedPostDate, setSelectedPostDate] = useState();
  const watchDate = watch("jobPostDate");

  const onSubmit = (data) => {
    // code to submit form
    console.log(data);
  };

  useEffect(() => {
    if (!getValues("jobPostDate")) {
      return;
    }
    const selectedDate = new Date(getValues("jobPostDate"));
    setSelectedPostDate(selectedDate.toDateString());
  }, [watchDate]);

  return (
    <>
      <div className="create-job-container" style={styles.pageContainer}>
        <div>
          <Card style={styles.cardContainer}>
            <CardBody>
              <CardTitle style={styles.section}>
                <h3> Create New Job</h3>
              </CardTitle>
              <Form
                style={styles.formContainer}
                onSubmit={handleSubmit(onSubmit)}
              >
                <FormGroup>
                  <Controller
                    as={Input}
                    type="text"
                    name="jobTitle"
                    control={control}
                    rules={{ required: true }}
                    placeholder="Enter Job Title"
                  />
                  {errors.jobTitle && (
                    <span className="error-text">This field is required</span>
                  )}
                </FormGroup>
                <FormGroup>
                  <Controller
                    as={Input}
                    type="text"
                    name="jobDesc"
                    control={control}
                    rules={{ required: true }}
                    placeholder="Enter Job Description"
                  />
                  {errors.jobDesc && (
                    <span className="error-text">This field is required</span>
                  )}
                </FormGroup>
                <FormGroup>
                  <Controller
                    name="skills"
                    as={Select}
                    options={skills}
                    control={control}
                    rules={{ required: true }}
                    isMulti
                    placeholder="Select Skills"
                  />
                  {errors.skills && (
                    <span className="error-text">This field is required</span>
                  )}
                </FormGroup>
                <FormGroup>
                  <Controller
                    as={Input}
                    type="text"
                    name="companyName"
                    control={control}
                    rules={{ required: true }}
                    placeholder="Enter Company Name"
                  />
                  {errors.companyName && (
                    <span className="error-text">This field is required</span>
                  )}
                </FormGroup>
                <FormGroup style={styles.relativeEle}>
                  <Input
                    type="text"
                    name="jobPostDateInput"
                    placeholder="Select Job Post Date"
                    value={selectedPostDate}
                  />
                  {errors.jobPostDate && (
                    <span className="error-text">This field is required</span>
                  )}
                  <Controller
                    name="jobPostDate"
                    as={DatePicker}
                    control={control}
                    rules={{ required: true }}
                    maxDate={new Date()}
                    clearIcon={null}
                    className="app-date-custom-style"
                  />
                </FormGroup>
                <FormGroup>
                  <Controller
                    as={Input}
                    type="text"
                    name="workLocation"
                    control={control}
                    rules={{ required: true }}
                    placeholder="Enter Work Location"
                  />
                  {errors.workLocation && (
                    <span className="error-text">This field is required</span>
                  )}
                </FormGroup>
                <FormGroup>
                  <Controller
                    name="benefits"
                    as={Select}
                    options={benefits}
                    control={control}
                    rules={{ required: true }}
                    placeholder="Select Benefits"
                    isMulti
                  />
                  {errors.benefits && (
                    <span className="error-text">This field is required</span>
                  )}
                </FormGroup>
                <FormGroup>
                  <Controller
                    name="workVisa"
                    as={Select}
                    options={visaSelection}
                    control={control}
                    rules={{ required: true }}
                    placeholder="Will Sponsor Work Visa"
                  />
                  {errors.workVisa && (
                    <span className="error-text">This field is required</span>
                  )}
                </FormGroup>

                <div style={styles.section}>
                  <Button type="submit" variant="primary">
                    Create New Job
                  </Button>
                </div>
              </Form>
            </CardBody>
          </Card>
        </div>
      </div>
    </>
  );
}

Signin = () => {
    const context = useContext(UserContext)
    const [email, setEmail] = useState("")
    const [password, setPassword] = useState("")

    const handleSignup = () => {
        firebase
            .auth()
            .signInWithEmailAndPassword(email, password)
            .then(res => {
                console.log(res)
                context.setUser({
                    email: res.user.email,
                    uid: res.user.uid
                })
            })
            .catch(err => {
                console.log(err);
                toast(err.message, {
                    type: 'error'
                })
            })
    }

    const handleFormSubmit = e => {
        e.preventDefault()
        handleSignup()
    }

    if (context.user?.uid) {
        return (
            <Navigate to="/" replace />
        )
    }
    return (
        <Container className='text-center'>
            <Row>
                <Col lg={6} className='offset-lg-3 mt-5'>
                    <Card>
                        <Form onSubmit={handleFormSubmit}>
                            <CardHeader className=''>SignIn here</CardHeader>
                            <CardBody>
                                <FormGroup row>
                                    <Label for='email' sm={3}>
                                        Email
                                    </Label>
                                    <Col sm={9}>
                                        <Input
                                            type='email'
                                            name='email'
                                            id='email'
                                            placeholder='Your Email'
                                            value={email}
                                            onChange={e => setEmail(e.target.value)}
                                        />
                                    </Col>
                                </FormGroup>
                                <FormGroup row>
                                    <Label for='password' sm={3}>
                                        Password
                                    </Label>
                                    <Col sm={9}>
                                        <Input
                                            type='password'
                                            name='password'
                                            id='password'
                                            placeholder='Your Password'
                                            value={password}
                                            onChange={e => setPassword(e.target.value)}
                                        />
                                    </Col>
                                </FormGroup>
                            </CardBody>
                            <CardFooter>
                                <Button type='submit' block color='primary'>
                                    Sign In
                                </Button>
                            </CardFooter>
                        </Form>
                    </Card>
                </Col>
            </Row>
        </Container>
    );

}

render() {
        return (
            <div className='pt-2 px-3'>
                <div className='row mr-auto ml-0 mb-4 mt-0'>
                    <Button
                        color='primary'
                        size='lg'
                        onClick={() => {
                            window.location.href = "/";
                        }}
                        style={{
                            width: "60px",
                            height: "60px",
                            borderRadius: "50%",
                        }}>
                        <FontAwesomeIcon icon={faArrowLeft} />
                    </Button>
                </div>
                {!this.state.loaded ? (
                    <ReactLoading
                        type={"spin"}
                        color={"orange"}
                        height={"100vh"}
                        width={"40%"}
                        className='loading'
                    />
                ) : (
                    <Card id='blog' className='p-2 col-12 singleBlog'>
                        <CardImg
                            src={this.state.image}
                            alt='Card image cap'
                            className='img-thumbnail'
                        />
                        <CardBody>
                            <CardTitle className='text-primary'>
                                <h5>
                                    {this.state.title}
                                    <span className='float-right text-secondary'>
                                        {"-"}
                                        <em>@{this.state.author.username}</em>
                                    </span>
                                </h5>
                            </CardTitle>
                            {this.state.date !== "" && (
                                <CardSubtitle className='text-dark'>
                                    <FontAwesomeIcon
                                        icon={faCalendar}
                                        className='mr-2'
                                    />
                                    {new Intl.DateTimeFormat("en-US", {
                                        month: "long",
                                        day: "numeric",
                                        year: "numeric",
                                        hour: "numeric",
                                        minute: "numeric",
                                    }).format(Date.parse(this.state.date))}
                                    <span className='float-right'>
                                        <FontAwesomeIcon
                                            className='text-danger'
                                            icon={faHeart}
                                        />{" "}
                                        {this.state.likes.length}
                                    </span>
                                </CardSubtitle>
                            )}
                            <CardText>
                                <br />
                                {this.state.body}
                            </CardText>
                        </CardBody>
                        <CardFooter>
                            {this.props.user !== null &&
                                this.props.user._id ===
                                    this.state.author.id && (
                                    <div
                                        style={{ display: "flex" }}
                                        className='p-1'>
                                        <Button
                                            className='btn btn-danger mr-1'
                                            style={{ width: "48%" }}
                                            onClick={this.deleteBlog}>
                                            Delete
                                        </Button>{" "}
                                        <Button
                                            className='btn btn-warning ml-1'
                                            style={{ width: "48%" }}
                                            onClick={this.toggleModal}>
                                            Edit
                                        </Button>
                                    </div>
                                )}
                        </CardFooter>
                    </Card>
                )}
                <Modal
                    isOpen={this.state.isModalOpen}
                    fade={false}
                    toggle={this.toggleModal}>
                    <ModalHeader toggle={this.toggleModal}>
                        Add a blog
                    </ModalHeader>
                    <Form onSubmit={this.onSubmit}>
                        <ModalBody>
                            <FormGroup>
                                <Label htmlFor='title'>title</Label>
                                <Input
                                    type='text'
                                    id='title'
                                    onChange={this.ontitleChange}
                                    value={this.state.title}
                                    name='title'
                                />
                            </FormGroup>
                            <FormGroup>
                                <Label htmlFor='imageURL'>imageURL</Label>
                                <Input
                                    type='text'
                                    id='imageURL'
                                    onChange={this.onimgChange}
                                    value={this.state.image}
                                    name='imageURL'
                                />
                            </FormGroup>
                            <FormGroup>
                                <Label htmlFor='body'>body</Label>
                                <Input
                                    type='textarea'
                                    id='body'
                                    onChange={this.onbodyChange}
                                    value={this.state.body}
                                    name='body'
                                />
                            </FormGroup>
                        </ModalBody>
                        <ModalFooter>
                            <Button
                                type='submit'
                                value='submit'
                                color='primary'>
                                UPDATE BLOG
                            </Button>
                        </ModalFooter>
                    </Form>
                </Modal>
            </div>
        );
    }

App = () => {
  const [data, setData] = useState([]);
  useEffect(() => {
    const doFetch = async () => {
      const response = await fetch('https://randomuser.me/api/?results=100');
      const body = await response.json();
      const contacts = body.results;
      console.log(contacts);
      setData(contacts);
    };
    doFetch();
  }, []);

  const renderRowSubComponent = (row) => {
    const {
      name: { first, last },
      location: { city, street, postcode },
      picture,
      cell,
    } = row.original;
    return (
      <Card style={{ width: '18rem', margin: '0 auto' }}>
        <CardImg top src={picture.large} alt='Card image cap' />
        <CardBody>
          <CardTitle>
            <strong>{`${first} ${last}`} </strong>
          </CardTitle>
          <CardText>
            <strong>Phone</strong>: {cell} <br />
            <strong>Address:</strong>{' '}
            {`${street.name} ${street.number} - ${postcode} - ${city}`}
          </CardText>
        </CardBody>
      </Card>
    );
  };

  const columns = useMemo(
    () => [
      {
        Header: () => null,
        id: 'expander', // 'id' is required
        Cell: ({ row }) => (
          <span {...row.getToggleRowExpandedProps()}>
            {row.isExpanded ? '?' : '?'}
          </span>
        ),
      },
      {
        Header: 'Title',
        accessor: 'name.title',
        disableSortBy: true,
        Filter: SelectColumnFilter,
        filter: 'equals',
      },
      {
        Header: 'First Name',
        accessor: 'name.first',
      },
      {
        Header: 'Last Name',
        accessor: 'name.last',
      },
      {
        Header: 'Email',
        accessor: 'email',
      },
      {
        Header: 'City',
        accessor: 'location.city',
      },
      {
        Header: 'Hemisphere',
        accessor: (values) => {
          const { latitude, longitude } = values.location.coordinates;
          const first = Number(latitude) > 0 ? 'N' : 'S';
          const second = Number(longitude) > 0 ? 'E' : 'W';
          return first + '/' + second;
        },
        disableSortBy: true,
        Filter: SelectColumnFilter,
        filter: 'equals',
        Cell: ({ cell }) => {
          const { value } = cell;

          const pickEmoji = (value) => {
            let first = value[0]; // N or S
            let second = value[2]; // E or W
            const options = ['⇖', '⇗', '⇙', '⇘'];
            let num = first === 'N' ? 0 : 2;
            num = second === 'E' ? num + 1 : num;
            return options[num];
          };

          return (
            <div style={{ textAlign: 'center', fontSize: 18 }}>
              {pickEmoji(value)}
            </div>
          );
        },
      },
    ],
    []
  );

  return (
    <Container style={{ marginTop: 100 }}>
      <TableContainer
        columns={columns}
        data={data}
        renderRowSubComponent={renderRowSubComponent}
      />
    </Container>
  );
}

PopperCard = ({ el, poppers }) => {
  const { user } = useUser()
  const [spinnerDisplay, setSpinnerDisplay] = useState('d-none')
  const [title, setTitle] = useState('')
  const inputRef = useRef(null)

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus()
    }
  }, [])

  const handleChange = (event) => {
    setTitle(event.target.value)
  }

  const handleSubmit = async (event) => {
    event.preventDefault()
    setSpinnerDisplay('d-block')

    const rootId = el.cy().nodes().id()
    const key = rootId.split('/')[1]
    const { ok, data: result, status } = await fetcher(
      `/api/nodes?parentId=${el.id()}`,
      user.token,
      'POST',
      JSON.stringify({ title })
    )
    const options = {
      place: 'tr',
      autoDismiss: 7,
    }

    if (ok) {
      mutate([`/api/timeline/events?key=${key}`, user.token], null, true)
      mutate([`/api/mindmaps/${key}?timestamp=`, user.token], null, true)

      options.message = 'Added node!'
      options.type = 'success'
    } else {
      options.message = `Failed to add node! - ${JSON.stringify(
        result || status
      )}`
      options.type = 'danger'
    }

    if (window.notify) {
      window.notify(options)
    }
    setSpinnerDisplay('d-none')
    removePopper(el.id(), `popper-${el.id()}`, poppers)
  }

  return (
    <Card className="border-dark">
      <CardBody>
        <CardTitle
          tag="h5"
          className="mw-100 mb-4"
          style={{ minWidth: '50vw' }}
        >
          Add Child Node{' '}
          <small className="text-muted">(of {el.data('title')})</small>
          <CloseButton
            divKey={`popper-${el.id()}`}
            popperKey={el.id()}
            poppers={poppers}
          />
        </CardTitle>
        <CardText tag="div" className="mw-100">
          <Form onSubmit={handleSubmit} inline>
            <FormGroup className="mb-2 mr-sm-2 mb-sm-0">
              <Input
                type="text"
                name="title"
                id="title"
                placeholder="Type a title and hit ⏎"
                value={title}
                onChange={handleChange}
                required
                maxLength="50"
                autoComplete="off"
                innerRef={inputRef}
              />
            </FormGroup>
            <FormGroup className={spinnerDisplay}>
              <Spinner />
            </FormGroup>
          </Form>
        </CardText>
      </CardBody>
    </Card>
  )
}