reactstrap#CardTitle JavaScript Examples

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

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

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

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

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(

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

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

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>

        );
}

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

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

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

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

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

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

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

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

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

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

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

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">
          <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>

        );
}

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

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

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

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

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

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