react-bootstrap#Glyphicon TypeScript Examples

render() {
    // if (this.state.toCart) return <Redirect to="/cart" />;

    return (
      <button
        className={this.getVariant()}
        disabled={this.state.loading}
        type="button"
        onClick={this.onAddToCart}
      >
        {this.state.loading && (
          <Glyphicon glyph="refresh" className="spinning" />
        )}
        {this.props.variant === "buyAgain"
          ? `Buy again`
          : this.state.buttonText}
      </button>
    );
  }

render() { 
    return (
      <span>             
        <Glyphicon glyph={this.props.stars >= 1 ? "star" : "star-empty"} />
        <Glyphicon glyph={this.props.stars >= 2 ? "star" : "star-empty"} />
        <Glyphicon glyph={this.props.stars >= 3 ? "star" : "star-empty"} />
        <Glyphicon glyph={this.props.stars >= 4 ? "star" : "star-empty"} />
        <Glyphicon glyph={this.props.stars >= 5 ? "star" : "star-empty"} />                          
      </span>
    );
  }

render() {
    if (!this.state.book) return null;

    return (
      <div className="white-box">
        <div className="media">
          <div className="media-left media-middle">
            <img
              className="media-object product-thumb"
              src={`./api/getImage?bookId=${this.state.book["_key"]}`}
              alt={`${this.state.book.name} cover`}
            />
          </div>
          <div className="media-body">
            <h3 className="media-heading">
              {this.state.book.name}
              <div className="pull-right margin-1">
                <small>${this.state.book.price}</small>
              </div>
            </h3>
            <p>
              <small>{this.state.book.category}</small>
            </p>
            {/* <FriendRecommendations bookId={this.props.order.bookId} /> */}
            <div>
              Rating
              <div className="pull-right">
                <div className="input-group">
                  <input
                    type="number"
                    className="form-control product-quantity-input-style"
                    placeholder="Quantity"
                    defaultValue={this.props.order.quantity.toString()}
                    onChange={this.onQuantityUpdated}
                    min={1}
                  />
                  <span className="input-group-btn">
                    <button
                      className="btn btn-black"
                      type="button"
                      onClick={this.onRemove}
                      disabled={this.state.removeLoading}
                    >
                      {this.state.removeLoading && (
                        <Glyphicon glyph="refresh" className="spinning" />
                      )}
                      Remove
                    </button>
                  </span>
                </div>
              </div>
            </div>
            <p>
              <StarRating stars={this.state.book.rating} />
            </p>
          </div>
        </div>
      </div>
    );
  }

render() {
    if (this.state.redirect) return <Redirect to="/" />;

    return (
      <div className="Login">
        <form onSubmit={this.onLogin}>
          <FormGroup controlId="email" validationState={this.state.emailValid}>
            <ControlLabel>Email</ControlLabel>
            <FormControl
              name="email"
              type="email"
              bsSize="large"
              value={this.state.email}
              onChange={this.onEmailChange}
            />
            <FormControl.Feedback />
          </FormGroup>
          <FormGroup
            controlId="password"
            validationState={this.state.passwordValid}
          >
            <ControlLabel>Password</ControlLabel>
            <FormControl
              name="password"
              type="password"
              bsSize="large"
              value={this.state.password}
              onChange={this.onPasswordChange}
            />
            <FormControl.Feedback />
          </FormGroup>
          <Button
            block
            bsSize="large"
            type="submit"
            disabled={
              this.state.passwordValid !== "success" ||
              this.state.emailValid !== "success"
            }
          >
            {this.state.loading && (
              <Glyphicon glyph="refresh" className="spinning" />
            )}
            Log in
          </Button>
        </form>
      </div>
    );
  }

showSignupForm = () => {
    return (
      <form onSubmit={this.onSignup}>
        <FormGroup controlId="email" validationState={this.state.emailValid}>
          <ControlLabel>Email</ControlLabel>
          <FormControl
            name="email"
            type="email"
            bsSize="large"
            value={this.state.email}
            onChange={this.onEmailChange}
          />
          <FormControl.Feedback />
        </FormGroup>
        <FormGroup
          controlId="password"
          validationState={this.state.passwordValid}
        >
          <ControlLabel>Password</ControlLabel>
          <FormControl
            name="password"
            type="password"
            bsSize="large"
            value={this.state.password}
            onChange={this.onPasswordChange}
          />
          <FormControl.Feedback />
          <HelpBlock>Must be at least 8 characters</HelpBlock>
        </FormGroup>
        <FormGroup
          controlId="confirmPassword"
          validationState={this.state.confirmPasswordValid}
        >
          <ControlLabel>Confirm Password</ControlLabel>
          <FormControl
            name="confirmPassword"
            type="password"
            bsSize="large"
            value={this.state.confirmPassword}
            onChange={this.onConfirmPasswordChange}
          />
          <FormControl.Feedback />
        </FormGroup>
        <Button
          block
          bsSize="large"
          type="submit"
          disabled={
            this.state.passwordValid !== "success" ||
            this.state.confirmPasswordValid !== "success" ||
            this.state.emailValid !== "success"
          }
        >
          {this.state.loading && (
            <Glyphicon glyph="refresh" className="spinning" />
          )}
          Log in
        </Button>
      </form>
    );
  };

renderLanding() {
    return (
      <div className="lander">
        <hr />
        <p>
          Welcome to the Edge Commerce Bookstore example app built entirely with
          Cloudflare Workers & Marcometa Global Data Network. It's entirely
          serverless and geo-distributed, which provides a lovely developer
          experience when building it and unparalleled performance.
        </p>
        <p>
          Creating a new user account to access the app will give you the full
          'shopping' experience. If you don't want to take the time to sign up,
          you can access a shared demo account with a single click below (more
          than one person may be logged into the shared account at once, so you
          might see some unexpected behavior).
        </p>
        <p>
          Learn more about the architecture of the app by checking out the
          source code in this{" "}
          <a
            href="https://github.com/Macrometacorp/tutorial-cloudflare-bookstore"
            target="_blank"
          >
            github repository
          </a>
          .
        </p>
        <div className="button-container col-md-12">
          <div style={{ paddingTop: "20px", paddingBottom: "20px" }}>
            <LinkContainer to="/signup">
              <a href="/signup">Create an Edge Commerce Demo Account</a>
            </LinkContainer>
          </div>
          <div style={{ marginLeft: "30%", marginRight: "30%" }}>
            <p
              onClick={(event: any) => {
                this.onLogin(event);
              }}
              className="link-click"
              style={{
                color: "#2eadde",
                fontSize: "14px",
                fontWeight: "bold",
              }}
            >
              {this.state.isLoading && (
                <Glyphicon glyph="refresh" className="spinning" />
              )}
              Log in to shared guest account
            </p>
          </div>
        </div>
        <figure>
          <img
            src={screenshot}
            className="img-fluid full-width screenshot-shadow img-center"
            alt="Screenshot"
          ></img>

          <figcaption style={{ paddingTop: "2px" }}>
            <p style={{ fontSize: "15px" }}>
              This example app is an exact replica of the Amazon Web Services{" "}
              <a href="https://d2h3ljlsmzojxz.cloudfront.net/" target="_blank">
                Amazon Book Store example app
              </a>{" "}
              using Cloudflare and Macrometa instead of AWS.
            </p>
          </figcaption>
        </figure>
        <footer
          style={{
            height: "auto",
            backgroundColor: "#3d3cb1",
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",

            marginTop: "100px",
          }}
        >
          <div
            style={{
              display: "flex",
              justifyContent: "space-around",
              flexDirection: "column",
            }}
          >
            <div
              style={{
                display: "flex",
                justifyContent: "center",
                paddingBottom: "10px",
                paddingTop: "40px",
              }}
            >
              <h4
                style={{
                  color: "white",
                  display: "flex",
                  justifyContent: "center",
                }}
              >
                Get started using Macrometa
              </h4>
            </div>
            <div
              style={{
                display: "flex",
                justifyContent: "center",
                paddingBottom: "40px",
              }}
            >
              <form
                action="https://cloudflare.paas.macrometa.io/signup"
                method="get"
                target="_blank"
              >
                <Button type="submit">
                  {this.state.isLoading && (
                    <Glyphicon glyph="refresh" className="spinning" />
                  )}
                  Sign up for FREE a Developer Account
                </Button>
              </form>
            </div>
          </div>
        </footer>
      </div>
    );
  }