reactstrap#CardTitle JavaScript Examples

The following examples show how to use reactstrap#CardTitle. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: FormEditors.js    From gedge-platform with Apache License 2.0 6 votes vote down vote up
render() {
    return (
      <React.Fragment>
        <div className="page-content">
          <Container fluid={true}>

          <Breadcrumbs title="Form Editors" breadcrumbItems={this.state.breadcrumbItems} />

            <Row>
              <Col>
                <Card>
                  <CardBody>
                    <CardTitle>react-draft-wysiwyg</CardTitle>
                    <CardSubtitle className="mb-3">
                      Bootstrap-wysihtml5 is a javascript plugin that makes it
                      easy to create simple, beautiful wysiwyg editors with the
                      help of wysihtml5 and Twitter Bootstrap.
                    </CardSubtitle>

                    <Form method="post">
                      <Editor
                        toolbarClassName="toolbarClassName"
                        wrapperClassName="wrapperClassName"
                        editorClassName="editorClassName"
                      />
                    </Form>

                  </CardBody>
                </Card>
              </Col>
            </Row>

          </Container>
        </div>
      </React.Fragment>
    );
  }
Example #2
Source File: ProfileCard.js    From ReactJS-Projects with MIT License 6 votes vote down vote up
ProfileCard = ({ details }) => {
    return (
        <Card>
            <CardBody className='text-center'>
                <img alt="profile_pic" height="150" width="150" className="rounded-circle img-thumbnail border-danger" src={details.picture?.large} />
                <CardTitle className='text-primary'>
                    <h1>
                        <span>{details.name?.title}. {details.name?.first} {details.name?.last}</span>
                    </h1>
                </CardTitle>
                <CardText className='m-3'>
                    <span><FaMapMarkedAlt />  {details.location?.city}</span>
                </CardText>
                <CardText className='m-3'>
                    <span><FaPhone />  {details.phone}</span>
                </CardText>
                <CardText className='m-3'>
                    <span><FaEnvelope />  {details.email}</span>
                </CardText>
            </CardBody>
        </Card>
    )
}
Example #3
Source File: ChaincodeModal.js    From study-chain with MIT License 6 votes vote down vote up
render() {
    const { chaincode, classes } = this.props;

    const formattedSrc = beautify(chaincode.source, {
      indent_size: 4
    });
    const srcHeader = `${chaincode.chaincodename} ${chaincode.version}`;

    return (
      <Modal>
        {modalClasses => (
          <div className={classes.source}>
            <div className={modalClasses.dialog}>
              <Card className={modalClasses.card}>
                <CardTitle className={modalClasses.title}>
                  <FontAwesome name="file-text" className={classes.cubeIcon} />
                  {srcHeader}
                  <button
                    type="button"
                    onClick={this.handleClose}
                    className={modalClasses.closeBtn}
                  >
                    <FontAwesome name="close" />
                  </button>
                </CardTitle>
                <CardBody className={modalClasses.body}>
                  <textarea
                    className={classes.code}
                    value={formattedSrc}
                    readOnly
                  />
                </CardBody>
              </Card>
            </div>
          </div>
        )}
      </Modal>
    );
  }
Example #4
Source File: CardItem.js    From ReactJS-Projects with MIT License 6 votes vote down vote up
CardItem = ({ product, addToCart }) => {
    return (
        <Card className='mt-2 mb-1'>
            <CardImg
                top
                height="300"
                width="100%"
                src={product.mediumImage}
            />
            <CardBody className='text-center'>
                <CardTitle>Name: {product.productName}</CardTitle>
                <CardText className='secondary'>Price: $ {product.productPrice}</CardText>
                <Button color='info' onClick={() => addToCart(product)} >Add to cart</Button>
            </CardBody>
        </Card>
    )
}
Example #5
Source File: ShowCard.js    From master-en-code-g2 with MIT License 6 votes vote down vote up
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>
  );
}
Example #6
Source File: article.js    From web-frontend with MIT License 6 votes vote down vote up
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>
  );
}
Example #7
Source File: GraphicCovidRG.js    From covidAnalytics with MIT License 6 votes vote down vote up
render(){
    return(

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

            <CardTitle tag="h5" className=" mb-2 mb-xl-2 font-weight-bold">
              Casos Confirmados em Rio Grande
            </CardTitle> 

            <div>
                <canvas id="myChart" ref={this.chartRef}/>
            </div>

          </CardBody>
        </Card>
      </div>
    );
  }
Example #8
Source File: index.js    From DMS_React with GNU Affero General Public License v3.0 6 votes vote down vote up
Widget = ({children, styleName, title, style}) => {
  // console.log(style);
  return (
    <Card style={style} className={`jr-card jr-card-widget ${styleName}`}>
      {title ? <CardTitle>{title}</CardTitle> : null}
      {children}
    </Card>
  )
}
Example #9
Source File: TwelveMarks.js    From GB-GCGC with MIT License 6 votes vote down vote up
render(){
  return (
    <div class="container-fluid">
          <Card color="warning" className="Rounded p-3" >
                <CardTitle align="left">{this.state.inter}</CardTitle>
                <CardSubtitle align="left">
                  <Row>
                    <Col style={{"padding":"0px"}}>
                      Inter Percentage 
                    </Col>
                    <Col style={{"textAlign":"end"}}>
                      <Button style={{"background-color": "rgb(42, 50, 75)"}} onClick={()=>{this.handleModaltwelve()}}>Edit</Button>
                    </Col>
                  </Row>
                </CardSubtitle> 
                  <Modal show={this.state.show} onHide={()=>this.handleModaltwelve()} >
                    <Modal.Header closeButton>Edit Inter Percentage</Modal.Header>
                    <Modal.Body>
                      <form onSubmit={this.onSubmittwelve}>
                        <Row>
                          <Col>
                          <input type="text" name="TwelveMarks" value={this.state.inter}
                               onChange={this.onChangetwelve}  />
                          </Col>
                          <Col>
                          <Button type="submit">
                                Submit
                            </Button>                            
                          </Col>
                        </Row>
                      </form>
                    </Modal.Body>
                  </Modal>
              </Card>
        </div>

        );
}
Example #10
Source File: RequestsSlide.js    From covidsos with MIT License 5 votes vote down vote up
render() {
    const {request} = this.state;
    const {isAuthorisedUser, currentUserID} = this.props;
    const name = request.requestor_name || 'Someone';
    const location = request.full_address || request.location || request.geoaddress || request.where
        || 'NA';
    const why = request.why || request.what;
    const requestStr = request.request || 'NA';
    const source = request.source_org || request.source || 'NA';
    const helpText = this.getHelpText(name, location, why, requestStr);
    const ownedTask = request.managed_by_id === currentUserID;
    return (
        <>
          <Card className='full-height-card' key={(request.r_id || request.id)}>
            <CardHeader hidden={!isAuthorisedUser}>
              <div>
                <CardText>Managed By: <Badge color={ownedTask ? "success" : "primary"}>{ownedTask
                    ? 'You' : (request.managed_by || 'Admin')}</Badge></CardText>
                <CardText>
                  <Button outline color={ownedTask ? "success" : "primary"} size="sm"
                          disabled={ownedTask}
                          onClick={() => this.handleAssignToMeAsManager(ownedTask, request,
                              parseInt(currentUserID))}>
                    {ownedTask ? "Assigned" : "Assign to me"}
                  </Button>
                </CardText>
              </div>
            </CardHeader>
            <CardBody>
              <CardTitle className="h3 mb-0">{why || requestStr}</CardTitle>
              <CardText className="text-gray text-custom-small">
                Requested by {name} at {request.request_time}
              </CardText>
              {displayRequestCardDetails('Address', location)}
              {displayRequestCardDetails('Received via', source)}
            </CardBody>
            <CardFooter className="pt-0 pb-2">
              <Badge color="warning">{request.type}</Badge>
            </CardFooter>
            <CardFooter className="pt-2">
              <Row>
                <Col xs={6}>
                  {getShareButtons(request.accept_link, helpText)}
                </Col>
                <Col xs={{size: 3, offset: 1}} className="text-center">
                  <Button className="btn-link border-0 px-2 text-primary" size="md"
                          onClick={() => this.props.openPopup(request,
                              {name, location, why, requestStr, source, helpText})}>
                    See Details
                  </Button>
                </Col>
              </Row>
            </CardFooter>
          </Card>
        </>
    );
  }
Example #11
Source File: CategoryData.jsx    From watchmo with MIT License 5 votes vote down vote up
CategoryData = props => {
  return (
    <div>
      <CardTitle>
        <h4>{props.catData.name}</h4>
      </CardTitle>
      <CardSubtitle>
        Frequency(ms): <br />{' '}
        <div id="freqExamples">
          (ex: 1 sec = 1000; 1 min = 60000; 30 min = 1800000; 1 hour = 3600000; 1 day = 86400000)
        </div>
      </CardSubtitle>
      <Input
        type="text"
        name="frequency"
        id={`${props.catData.name}-freq`}
        placeholder="Set frequency of query execution"
        value={props.catData.frequency}
        onChange={props.freqChange}
      />
      <br />
      <CardSubtitle>Queries:</CardSubtitle>
      <QueryList
        key={props.catData.name}
        name={props.catData.name}
        queries={props.catData.queries}
        deleteQuery={props.deleteQuery}
        queryChange={props.queryChange}
      />
      <div id="btnAddQuery">
        <Button
          className="addQueryBtn"
          color="primary"
          size="md"
          id={`${props.catData.name}-addQuery`}
          onClick={props.addQuery}
          block
        >
          Add Query
        </Button>
      </div>
    </div>
  );
}
Example #12
Source File: Cards.jsx    From aglomerou with GNU General Public License v3.0 5 votes vote down vote up
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>
    );
}
Example #13
Source File: view.js    From hivemind with Apache License 2.0 5 votes vote down vote up
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>
  )
}
Example #14
Source File: PodInfo.js    From gedge-platform with Apache License 2.0 5 votes vote down vote up
render() {
        return (
            <React.Fragment>
                <div className="page-content">
                    <Container fluid={true}>

                        {/* <Breadcrumbs title="Form Xeditable" breadcrumbItems={this.state.breadcrumbItems} /> */}

                        <Row>
                            <Col>
                                <Card>
                                    <CardBody>
                                        <CardTitle>POD INFO</CardTitle>



                                        <Table responsive className="mb-0">
                                            <thead>
                                                <tr>
                                                    <th style={{ width: "20%" }}>이름</th>
                                                    <th style={{ width: "20%" }}>노드</th>
                                                    <th style={{ width: "20%" }}>파드 IP</th>
                                                    <th style={{ width: "20%" }}>CPU</th>
                                                    <th style={{ width: "20%" }}>MEMORY</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                </tr>
                                                <tr>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                </tr>
                                                <tr>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                </tr>

                                                <tr>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                </tr>
                                                <tr>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                </tr>
                                            </tbody>
                                        </Table>
                                    </CardBody>
                                </Card>
                            </Col>
                        </Row>
                    </Container>
                </div>
            </React.Fragment>
        );
    }
Example #15
Source File: SubsystemHeads.js    From Website2020 with MIT License 5 votes vote down vote up
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>
        </>
    );
}
Example #16
Source File: ViewContact.js    From ReactJS-Projects with MIT License 5 votes vote down vote up
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>
  );
}
Example #17
Source File: MusicData.js    From Music-Hoster-FrontEnd-Using-React with MIT License 5 votes vote down vote up
// 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>
      
    )
    }
Example #18
Source File: applicants.page.js    From hiring-system with GNU General Public License v3.0 5 votes vote down vote up
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>
  );
}
Example #19
Source File: TableCovidRS.js    From covidAnalytics with MIT License 5 votes vote down vote up
render(){
    //Incrementa contador de lihas
    var i = 1;

    return(
      <div className="TabRSContainer">
        <Card>

          <CardBody>

            <CardTitle tag="h4" className="TabTitle mb-2 mb-xl-2 font-weight-bold">
              Cidades com maior número de casos confirmados no RS
            </CardTitle> 

          </CardBody> 

          <Table striped>

            <thead>
              <tr>
                <th>#</th>
                <th>Cidade</th>
                <th>Casos Confirmados</th>
                <th>Óbitos</th>
              </tr>
            </thead>

            <tbody>

               {this.state.results.map(results => 
                <tr>
                  <th scope="row">{i++}</th>
                  <td>{results.city}</td>
                  <td>{results.confirmed}</td>
                  <td>{results.deaths}</td>
                </tr>
                )}        
            </tbody>
          </Table>
        </Card>
      </div>
    );
  }
Example #20
Source File: studentdetails.js    From GB-GCGC with MIT License 5 votes vote down vote up
function studentdetails() {
  return (
    <div>
        <div className='container'>
        <Row>
          <Col md="4" style={{marginRight:'2rem'}}>
            <Card color="success" className="Rounded p-3">
              <CardTitle align="left">90%</CardTitle>
              <CardSubtitle align="left">Tenth Percentage</CardSubtitle>
            </Card>
          </Col>
          <Col md="4" style={{marginRight:'2rem'}}>
            <Card color="warning" className="Rounded p-3">
              <CardTitle align="left">90%</CardTitle>
              <CardSubtitle align="left">Inter Percentage</CardSubtitle>
            </Card>
          </Col>
          <Col md="4" style={{marginRight:'2rem'}}>
            <Card color="danger" className="Rounded p-3">
              <CardTitle align="left">90%</CardTitle>
              <CardSubtitle align="left">B Tech Percentage</CardSubtitle>
            </Card>
          </Col>
        </Row>
      </div>
        <br></br>
        <Collapsible trigger="More Info">
          <br></br>
          <Row>
            <Col md="4">
              <Alert color="success" className="Rounded p-3">
                <CardTitle align="left">CSE</CardTitle>
                <CardSubtitle align="left">Branch</CardSubtitle>
              </Alert>
            </Col>
            <Col md="4">
              <Alert color="warning" className="Rounded p-3">
                <CardTitle align="left">A</CardTitle>
                <CardSubtitle align="left">Pass Category</CardSubtitle>
              </Alert>
            </Col>
            <Col md="4">
              <Alert color="danger" className="Rounded p-3">
                <CardTitle align="left">B</CardTitle>
                <CardSubtitle align="left">Section</CardSubtitle>
              </Alert>
            </Col>
          </Row>
        </Collapsible>
    </div>
  );
}
Example #21
Source File: ExperienceCard.jsx    From developer-portfolio with Apache License 2.0 5 votes vote down vote up
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>
	);
}
Example #22
Source File: ProductCard.js    From Merch-Dropper-fe with MIT License 5 votes vote down vote up
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>
  );
}
Example #23
Source File: Pass.js    From GB-GCGC with MIT License 5 votes vote down vote up
render(){
  return (
    <div class="container-fluid">
          <Alert color="warning" className="Rounded p-3" >
                <CardTitle align="left">{this.state.pass}</CardTitle>
                <CardSubtitle align="left">
                  <Row>
                    <Col style={{"padding":"0px"}}>
                      Pass Category 
                    </Col>
                    <Col style={{"textAlign":"end"}}>
                      <Button style={{"background-color": "rgb(42, 50, 75)"}} onClick={()=>{this.handleModalpass()}}>Edit</Button>
                    </Col>
                  </Row>
                  </CardSubtitle> 
                  <Modal show={this.state.show} onHide={()=>this.handleModalpass()} >
                    <Modal.Header closeButton>Edit Pass Category</Modal.Header>
                    <Modal.Body>
                      <form onSubmit={this.onSubmitpass}>
                        <Table className="passcategory" responsive>
                        <tbody>
                        <tr>
                            <td>
                              <input type="text" name="passcategory" value={this.state.pass}
                               onChange={this.onChangepass}  />
                            </td>
                            <td>
                              <div className={"form-group"}>
                                  <input type={"submit"} value={"Submit"} className={"btn btn-primary"}/>
                              </div>
                            </td>
                          </tr>
                        </tbody>
                        </Table>
                      </form>
                    </Modal.Body>
                  </Modal>

              </Alert>
        </div>

        );
}
Example #24
Source File: TransactionView.js    From study-chain with MIT License 4 votes vote down vote up
render() {
    const { transaction, classes } = this.props;
    if (transaction && !transaction.read_set) {
      return (
        <Modal>
          {modalClasses => (
            <div>
              <CardTitle className={modalClasses.title}>
                <FontAwesome name="list-alt" className={classes.listIcon} />
                Transaction Details
                <button
                  type="button"
                  onClick={this.handleClose}
                  className={modalClasses.closeBtn}
                >
                  <FontAwesome name="close" />
                </button>
              </CardTitle>
              <div align="center">
                <CardBody className={modalClasses.body}>
                  <span>
                    {' '}
                    <FontAwesome name="circle-o-notch" size="3x" spin />
                  </span>
                </CardBody>
              </div>
            </div>
          )}
        </Modal>
      );
    }
    if (transaction) {
      return (
        <Modal>
          {modalClasses => (
            <div className={modalClasses.dialog}>
              <Card className={modalClasses.card}>
                <CardTitle className={modalClasses.title}>
                  <FontAwesome name="list-alt" className={classes.listIcon} />
                  Transaction Details
                  <button
                    type="button"
                    onClick={this.handleClose}
                    className={modalClasses.closeBtn}
                  >
                    <FontAwesome name="close" />
                  </button>
                </CardTitle>
                <CardBody className={modalClasses.body}>
                  <Table striped hover responsive className="table-striped">
                    <tbody>
                      <tr>
                        <th>Transaction ID:</th>
                        <td>
                          {transaction.txhash}
                          <button
                            type="button"
                            className={modalClasses.copyBtn}
                          >
                            <div className={modalClasses.copy}>Copy</div>
                            <div className={modalClasses.copied}>Copied</div>
                            <CopyToClipboard text={transaction.txhash}>
                              <FontAwesome name="copy" />
                            </CopyToClipboard>
                          </button>
                        </td>
                      </tr>
                      <tr>
                        <th>Validation Code:</th>
                        <td>{transaction.validation_code}</td>
                      </tr>
                      <tr>
                        <th>Payload Proposal Hash:</th>
                        <td>{transaction.payload_proposal_hash}</td>
                      </tr>
                      <tr>
                        <th>Creator MSP:</th>
                        <td>{transaction.creator_msp_id}</td>
                      </tr>
                      <tr>
                        <th>Endoser:</th>
                        <td>{transaction.endorser_msp_id}</td>
                      </tr>
                      <tr>
                        <th>Chaincode Name:</th>
                        <td>{transaction.chaincodename}</td>
                      </tr>
                      <tr>
                        <th>Type:</th>
                        <td>{transaction.type}</td>
                      </tr>
                      <tr>
                        <th>Time:</th>
                        <td>{transaction.createdt}</td>
                      </tr>
                      <tr>
                        <th style={reads}>Reads:</th>
                        <td className={classes.JSONtree}>
                          <JSONTree
                            data={transaction.read_set}
                            theme={readTheme}
                            invertTheme={false}
                          />
                        </td>
                      </tr>
                      <tr>
                        <th style={writes}>Writes:</th>
                        <td className={classes.JSONtree}>
                          <JSONTree
                            data={transaction.write_set}
                            theme={writeTheme}
                            invertTheme={false}
                          />
                        </td>
                      </tr>
                    </tbody>
                  </Table>
                </CardBody>
              </Card>
            </div>
          )}
        </Modal>
      );
    }
    return (
      <Modal>
        {modalClasses => (
          <div>
            <CardTitle className={modalClasses.title}>
              <FontAwesome name="list-alt" className={classes.listIcon} />
              Transaction Details
              <button
                type="button"
                onClick={this.handleClose}
                className={modalClasses.closeBtn}
              >
                <FontAwesome name="close" />
              </button>
            </CardTitle>
            <div align="center">
              <CardBody className={modalClasses.body}>
                <span>
                  {' '}
                  <FontAwesome name="circle-o-notch" size="3x" spin />
                </span>
              </CardBody>
            </div>
          </div>
        )}
      </Modal>
    );
  }
Example #25
Source File: FormXeditable.js    From gedge-platform with Apache License 2.0 4 votes vote down vote up
render() {
    return (
      <React.Fragment>
        <div className="page-content">
          <Container fluid={true}>

            {/* <Breadcrumbs title="Form Xeditable" breadcrumbItems={this.state.breadcrumbItems} /> */}

            <Row>
              <Col>
                <Card>
                  <CardBody>
                    <CardTitle>Inline Example</CardTitle>
                    <CardSubtitle className="mb-3">
                      This library allows you to create editable elements on
                      your page. It can be used with any engine (bootstrap,
                      jquery-ui, jquery only) and includes both popup and inline
                      modes. Please try out demo to see how it works.
                    </CardSubtitle>


                    <Table responsive className="mb-0">
                      <thead>
                        <tr>
                          <th style={{ width: "50%" }}>Inline</th>
                          <th>Examples</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>Simple Text Field</td>
                          <td>
                            <Editable
                              alwaysEditing={false}
                              disabled={false}
                              editText="superuser"
                              id={null}
                              isValueClickable={false}
                              mode="inline"
                              placement="top"
                              showText
                              type="textfield"
                            />
                          </td>
                        </tr>
                        <tr>
                          <td>Empty text field, required</td>
                          <td>
                            <Editable
                              ajax={null}
                              alwaysEditing={false}
                              className={null}
                              disabled={false}
                              editText="Empty"
                              id={null}
                              isValueClickable={false}
                              label={null}
                              mode="inline"
                              onSubmit={null}
                              onValidated={null}
                              placement="top"
                              showText
                              type="textfield"
                              validate={(value) => {
                                if (!value) {
                                  return 'Required';
                                }
                              }}
                            />
                          </td>
                        </tr>
                        <tr>
                          <td>Select, local array, custom display</td>
                          <td>
                            <Editable
                              ajax={null}
                              alwaysEditing={false}
                              className={null}
                              disabled={false}
                              editText="male"
                              id={null}
                              isValueClickable={false}
                              label={null}
                              mode="inline"
                              onSubmit={null}
                              onValidated={null}
                              options={["male", "female"]}
                              placement="top"
                              showText
                              type="select"
                              validate={null}
                            />
                          </td>
                        </tr>

                        <tr>
                          <td>Combodate</td>
                          <td>
                            <Editable
                              ajax={null}
                              alwaysEditing={false}
                              className={null}
                              disabled={false}
                              editText="Enter Date"
                              id={null}
                              isValueClickable={false}
                              label={null}
                              mode="inline"
                              onSubmit={null}
                              onValidated={null}
                              placement="top"
                              showText
                              type="date"
                              validate={null}
                            />
                          </td>
                        </tr>
                        <tr>
                          <td>
                            Textarea, buttons below. Submit by ctrl+enter
                          </td>
                          <td>
                            <Editable
                              ajax={null}
                              alwaysEditing={false}
                              className={null}
                              disabled={false}
                              editText="Awesome User"
                              id={null}
                              isValueClickable={false}
                              label={null}
                              mode="inline"
                              onSubmit={null}
                              onValidated={null}
                              placement="top"
                              showText
                              type="textarea"
                              validate={null}
                            />
                          </td>
                        </tr>
                      </tbody>
                    </Table>
                  </CardBody>
                </Card>
              </Col>
            </Row>
          </Container>
        </div>
      </React.Fragment>
    );
  }
Example #26
Source File: BlogRoll.js    From Blogs with MIT License 4 votes vote down vote up
render() {
    const { data } = this.props;
    const { edges: posts } = data.allMarkdownRemark;

    return (
      <div className="allPosts">
        {posts &&
          posts.map(({ node: post }) => (
            <div
              style={{
                height: "auto",
                margin: "2%",
                backgroundColor: "white",
                boxShadow: "0px 7px 15px #b1b1b1",
                position: "relative",
                borderRadius:"2%"
              }}
              key={post.id}
            >
              <div>
                {post.frontmatter.featuredimage ? (
                  <div style={{ border: "none" }}>
                    <img
                      src={
                        post.frontmatter.featuredimage != null
                          ? "/img/" +
                            post.frontmatter.featuredimage.relativePath
                          : "https://increasify.com.au/wp-content/uploads/2016/08/default-image.png"
                      }
                      alt={post.frontmatter.title}
                      style={{
                        width: "100%",
                        borderTopLeftRadius:"2%",
                        borderTopRightRadius:"2%"
                      }}
                    />
                  </div>
                ) : null}
                <CardTitle style={{ padding: "5%", fontSize: "1.4em" }}>
                  <Link className="title" to={post.fields.slug}>
                    <span
                      style={{
                        color: "#242424",
                      }}
                      className="hover-underline"
                    >
                      {post.frontmatter.title}
                    </span>
                  </Link>
                  <span className="d-block mt-1 text-muted">
                    {post.frontmatter.date}
                  </span>
                </CardTitle>
              </div>
              <p className="px-4 text-justify" style={{ marginBottom: "60px" }}>
                {post.excerpt.charAt(0).toUpperCase() +
                  post.excerpt.substring(1, 150)}
                ...
                <br />
                <br />
              </p>
              <p
                className="px-4 pb-2"
                style={{
                  position: "absolute",
                  bottom: "0px",
                  marginTop: "40px",
                }}
              >
                <Link
                  className="btn btn-primary text-white"
                  to={post.fields.slug}
                >
                  Keep Reading →
                </Link>
              </p>
            </div>
          ))}
      </div>
    );
  }
Example #27
Source File: SparklineChart.js    From gedge-platform with Apache License 2.0 4 votes vote down vote up
render() {
    return (
      <React.Fragment>
        <div className="page-content">
          <Container fluid>

            {/* Render Breadcrumb */}
            <Breadcrumbs title="Sparkline Chart" breadcrumbItems={this.state.breadcrumbItems} />

            <Row>
              <Col sm={4}>
                <Card>
                  <CardBody>
                    <CardTitle className="mb-4">Spots Chart</CardTitle>
                    <Sparklines
                      height={100}
                      data={[5, 10, 5, 20, 18, 17, 29, 10, 18]}
                      margin={6}
                    >
                      <SparklinesLine
                        style={{
                          strokeWidth: 1,
                          stroke: "#336aff",
                          fill: "none"
                        }}
                      />
                      <SparklinesSpots
                        size={4}
                        style={{
                          stroke: "#336aff",
                          strokeWidth: 1,
                          fill: "white"
                        }}
                      />
                    </Sparklines>
                  </CardBody>
                </Card>
              </Col>
              <Col sm={4}>
                <Card>
                  <CardBody>
                    <CardTitle className="mb-4">Bar Chart</CardTitle>
                    <div className="text-center">
                      <Sparklines
                        height={100}
                        data={[5, 6, 2, 8, 9, 4, 7, 10, 11, 12, 10, 4, 7, 10]}
                      >
                        <SparklinesBars
                          style={{ fill: "#02a499" }}
                          barWidth={5}
                        />
                      </Sparklines>
                    </div>
                  </CardBody>
                </Card>
              </Col>
              <Col sm={4}>
                <Card>
                  <CardBody className="analytics-info">
                    <CardTitle className="mb-4">Line Chart</CardTitle>
                    <Sparklines
                      height={100}
                      data={[0, 23, 43, 35, 44, 45, 56, 37, 40, 45, 56, 7, 10]}
                    >
                      <SparklinesLine
                        color="#3c4ccf"
                        lineWidth={1}
                        style={{ fill: "transparent" }}
                      />
                    </Sparklines>
                  </CardBody>
                </Card>
              </Col>
            </Row>
            <Row>
              <Col sm={4}>
                <Card>
                  <CardBody>
                    <CardTitle className="mb-4">Composite Bar Chart</CardTitle>
                    <Sparklines
                      height={100}
                      data={[5, 6, 2, 9, 4, 7, 10, 12, 4, 7, 10]}
                    >
                      <SparklinesCurve
                        style={{
                          strokeWidth: 0.8,
                          stroke: "#02a499",
                          fill: "transparent"
                        }}
                      />
                      <SparklinesBars style={{ fill: "#3c4ccf" }} barWidth={8} />
                    </Sparklines>
                  </CardBody>
                </Card>
              </Col>
              <Col sm={4}>
                <Card>
                  <CardBody>
                    <CardTitle className="mb-4">Reference Line Charts</CardTitle>
                    <Sparklines
                      height={100}
                      data={[5, 10, 5, 20, 18, 17, 29, 10, 18, 15, 20, 18, 17, 29, 10, 18]}
                    >
                      <SparklinesBars
                        style={{ fill: "#02a499", fillOpacity: ".5" }}
                      />
                      <SparklinesReferenceLine />
                    </Sparklines>
                  </CardBody>
                </Card>
              </Col>
              <Col sm={4}>
                <Card className="bg-success mb-4">
                  <CardBody>
                    <CardTitle className="mb-4">Real World Chart</CardTitle>
                    <Sparklines
                      height={80}
                      data={[4, 6, 7, 7, 4, 3, 2, 1, 4, 4, 5, 6, 3, 4, 5, 8, 7, 6, 9, 3, 2, 4, 1, 5, 6, 4, 3, 7]}
                      width={200}
                    >
                      <SparklinesLine
                        style={{ stroke: "#fff", fill: "transparent" }}
                      />
                      <SparklinesSpots />
                    </Sparklines>
                  </CardBody>
                </Card>
              </Col>
            </Row>

            <Row>
              <Col sm={4}>
                <Card>
                  <CardBody>
                    <CardTitle className="mb-4">Normal Band</CardTitle>
                    <Sparklines
                      height={100}
                      data={[5, 10, 5, 20, 18, 17, 29, 10, 18]}
                    >
                      <SparklinesLine
                        style={{
                          strokeWidth: 0.8,
                          stroke: "#6d60b0",
                          fill: "transparent"
                        }}
                      />
                      <SparklinesReferenceLine type="mean" />
                    </Sparklines>
                  </CardBody>
                </Card>
              </Col>
            </Row>

          </Container>
        </div>
      </React.Fragment>
    );
  }
Example #28
Source File: index.js    From gobench with Apache License 2.0 4 votes vote down vote up
render() {
    return (
      <div>
        <h5 className="mb-4">
          <strong>Default Cards</strong>
        </h5>
        <div>
          <Card>
            <CardImg
              top
              width="100%"
              src="https://via.placeholder.com/1300x300/f0f2f4/e4e9f0"
              alt="Card cap"
            />
            <CardBody>
              <CardTitle>Card title</CardTitle>
              <CardSubtitle>Card subtitle</CardSubtitle>
              <CardText>
                Some quick example text to build on the card title and make up the bulk of the cards
                content.
              </CardText>
              <Button color="primary">Button</Button>
            </CardBody>
          </Card>
        </div>
        <div className="mb-5">
          <Card>
            <CardBody>
              <CardTitle>Card title</CardTitle>
              <CardSubtitle>Card subtitle</CardSubtitle>
            </CardBody>
            <CardImg
              top
              width="100%"
              src="https://via.placeholder.com/1300x300/f0f2f4/e4e9f0"
              alt="Card cap"
            />
            <CardBody>
              <CardText>
                Some quick example text to build on the card title and make up the bulk of the cards
                content.
              </CardText>
              <CardLink>Card Link</CardLink>
              <CardLink>Another Link</CardLink>
            </CardBody>
          </Card>
        </div>
        <h5 className="mb-4">
          <strong>Colorful Cards</strong>
        </h5>
        <div className="row">
          <div className="col-lg-6">
            <Card body inverse style={{ backgroundColor: '#333', borderColor: '#333' }}>
              <CardTitle>Special Title Treatment</CardTitle>
              <CardText>
                With supporting text below as a natural lead-in to additional content.
              </CardText>
              <Button>Button</Button>
            </Card>
          </div>
          <div className="col-lg-6">
            <Card body inverse color="primary">
              <CardTitle>Special Title Treatment</CardTitle>
              <CardText>
                With supporting text below as a natural lead-in to additional content.
              </CardText>
              <Button color="light">Button</Button>
            </Card>
          </div>
          <div className="col-lg-6">
            <Card body inverse color="success">
              <CardTitle>Special Title Treatment</CardTitle>
              <CardText>
                With supporting text below as a natural lead-in to additional content.
              </CardText>
              <Button color="light">Button</Button>
            </Card>
          </div>
          <div className="col-lg-6">
            <Card body inverse color="info">
              <CardTitle>Special Title Treatment</CardTitle>
              <CardText>
                With supporting text below as a natural lead-in to additional content.
              </CardText>
              <Button color="light">Button</Button>
            </Card>
          </div>
          <div className="col-lg-6">
            <Card body inverse color="warning">
              <CardTitle>Special Title Treatment</CardTitle>
              <CardText>
                With supporting text below as a natural lead-in to additional content.
              </CardText>
              <Button color="light">Button</Button>
            </Card>
          </div>
          <div className="col-lg-6">
            <Card body inverse color="danger">
              <CardTitle>Special Title Treatment</CardTitle>
              <CardText>
                With supporting text below as a natural lead-in to additional content.
              </CardText>
              <Button color="light">Button</Button>
            </Card>
          </div>
        </div>
      </div>
    )
  }
Example #29
Source File: TaskStatusUpdate.js    From covidsos with MIT License 4 votes vote down vote up
render() {

    const {task, status, feedback, loading, isRejected, submitClicked} = this.state;
    const {what, why, request_address, urgent, name, mob_number, financial_assistance, status: existingStatus} = task;
    let { step } = this.state;

    // For admin task status update step 0 is skipped
    if(step === 0 && isAuthorisedUserLoggedIn ())
      step = 1;
    return (
        <>
          <Header showCards={false}/>
          {/* Page content */}
          <Container className="mt--7" fluid>
            <Row className="justify-content-center">
              <Col lg="8" md="8">
                <Card className="bg-secondary shadow border-0">
                  <CardBody className="px-lg-3 py-lg-3 text-justify">
                    <div className="text-uppercase text-center mt-2 mb-2">
                      Task Details
                    </div>
                  </CardBody>
                </Card>
              </Col>
            </Row>
          </Container>
          {
            step === 0 && (
                <Container className="request-card-container" fluid>
                  <Row>
                    <Col sm="12">
                      <Card
                          className='task-card task-card-status-update task-container content--center'>
                        {
                          !loading && (
                              <CardBody>
                                <h2>{name} - needs your help!</h2>
                                {
                                  urgent === 'yes' && (
                                      <Badge color="warning" className="margin-bottom-10">
                                        This is urgent request
                                      </Badge>
                                  )
                                }

                                <div className='margin-bottom-10'>
                                  <p className='no-margin label'>Address</p>
                                  <p className='no-margin'>{request_address}</p>
                                </div>

                                <div className='margin-bottom-10'>
                                  <p className='no-margin label'>Mobile Number</p>
                                  <p className='no-margin'>{mob_number}</p>
                                </div>

                                <div className='margin-bottom-10'>
                                  <p className='no-margin label'>Reason</p>
                                  <p className='no-margin'>{why}</p>
                                </div>

                                <div className='margin-bottom-10'>
                                  <p className='no-margin label'>Help required on</p>
                                  <p>{what}</p>
                                </div>

                                {
                                  financial_assistance && (
                                      <Badge color="warning" className="margin-bottom-20">
                                        This help seeker cannot afford to pay.
                                      </Badge>
                                  )
                                }

                                {
                                  existingStatus !== 'completed' && (
                                    <div style={{ display: 'flex'}}>
                                      <div style={{ maxWidth: '50%', marginRight: '20px'}}>
                                        <a href={'/faq'} target="_blank" rel="noopener noreferrer">
                                          <Button color="primary" style={{ width: '100%', whiteSpace: 'normal', padding: '8px', lineHeight: '1' }}>
                                            Have further questions?</Button>
                                        </a>
                                      </div>
                                      <div style={{ maxWidth: '50%'}}>
                                        <Button color="primary"
                                                onClick={() => this.setState({step: 1})}>Update
                                          Status</Button>
                                      </div>
                                    </div>
                                  )
                                }

                              </CardBody>
                          )
                        }
                        {
                          loading && (
                              <CardBody>
                                <CardTitle>Loading</CardTitle>
                              </CardBody>
                          )
                        }
                      </Card>
                    </Col>
                  </Row>
                </Container>
            )
          }

          {
            step === 1 && !loading && (
                <Container className="request-card-container" fluid>
                  <Row>
                    <Col sm="12">
                      <Card
                          className='task-card task-card-status-update task-container content--center'>
                        <CardBody>
                          <h2>{name} - needs your help!</h2>
                          {
                            urgent === 'yes' && (
                                <Badge color="warning" className="margin-bottom-10">
                                  This is urgent request
                                </Badge>
                            )
                          }

                          <Form>
                            <FormGroup>
                              <Label>Update Status</Label>
                              {
                                <>
                                  {
                                    (!isRejected || status === 'completed') && (
                                        <Button
                                            outline={status !== 'completed'}
                                            color={status === 'completed' ? "success" : 'secondary'}
                                            block
                                            onClick={() => this.setState({status: 'completed'})}
                                        >Yes, Task completed</Button>
                                    )
                                  }
                                  {
                                    isEmpty(status) && !isRejected && (
                                        <Button
                                            outline={!isRejected}
                                            color={isRejected ? "danger" : 'secondary'}
                                            block
                                            onClick={() => this.setState({isRejected: true})}
                                        >Can not complete</Button>
                                    )
                                  }
                                </>
                              }
                              {
                                isRejected && (
                                    <>
                                      <Button
                                          outline={status !== 'completed externally'}
                                          color={status === 'completed externally' ? "danger"
                                              : 'secondary'}
                                          block
                                          onClick={() => this.setState(
                                              {status: 'completed externally'})}
                                      >Somebody else did it</Button>
                                      <Button
                                          outline={status !== 'cancelled'}
                                          color={status === 'cancelled' ? "danger" : 'secondary'}
                                          block
                                          onClick={() => this.setState({status: 'cancelled'})}
                                      >Please assign new volunter</Button>
                                      <Button
                                          outline={status !== 'reported'}
                                          color={status === 'reported' ? "danger" : 'secondary'}
                                          block
                                          onClick={() => this.setState({status: 'reported'})}
                                      >Report issue</Button>
                                    </>
                                )
                              }
                            </FormGroup>

                            {
                              !isEmpty(status) && status !== 'not_completed' && (
                                  <FormGroup>
                                    <Label>What is your feedback for user?</Label>
                                    <Input
                                        autoComplete="off"
                                        type="textarea"
                                        name="feedback"
                                        placeholder="Add your feedback"
                                        value={feedback}
                                        onChange={(event) => this.setState(
                                            {feedback: event.target.value})}
                                    />
                                  </FormGroup>
                              )
                            }

                          </Form>

                          <div>
                            <Button color="primary"
                                    disabled={submitClicked || isEmpty(status) || isEmpty(feedback)}
                                    onClick={() => this.closeTask()}>Close Task</Button>
                          </div>
                        </CardBody>
                      </Card>
                    </Col>
                  </Row>
                </Container>
            )
          }
        </>
    )
  }