@fortawesome/free-solid-svg-icons#faClock JavaScript Examples

The following examples show how to use @fortawesome/free-solid-svg-icons#faClock. 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: index.js    From gatsby-blog-mdx with MIT License 6 votes vote down vote up 
PostCard = ({ id, title, date, path, excerpt, timeToRead }) => {
  return (
    <>
      <Link to={path}>
        <StyledPostCard key={id}>
          <h3>{title}</h3>
          {config.showTimeToRead && (
            <span>
              <FontAwesomeIcon
                className="icon-clock"
                icon={faClock}
                size="xs"
              />
              {timeToRead} minute read
            </span>
          )}
          <p>{excerpt}</p>
        </StyledPostCard>
      </Link>
    </>
  )
}
Example #2
Source File: EventList.jsx    From jitsi-party with MIT License 6 votes vote down vote up 
EventGroup = props => {
    const className = `event-list ${props.className}`
    return (
        <div className={className}>
            {props.events.map((event, index) => (
                <div className="event-item" key={`event-${index}`}>
                    <div className="event-info">
                        <div className="event-name">
                            {event.name}
                        </div>
                        <div className="event-description">
                            <ReactMarkdown
                                source={event.description}
                                allowedTypes={['text', 'break', 'emphasis', 'strong', 'delete', 'link']}
                                unwrapDisallowed={true}>
                            </ReactMarkdown>
                        </div>
                        <div className="event-coordinates">
                            <div className="event-time">
                                <FontAwesomeIcon icon={faClock} />
                                {formatEventTime(event)}
                            </div>
                            <div className="event-room">
                                <FontAwesomeIcon icon={faCompass} />
                                {event.roomName}
                            </div>
                        </div>
                    </div>
                    <div className="event-image">
                        <img src={event.image} />
                    </div>
                </div>
            ))}
        </div>
    )
}
Example #3
Source File: index.js    From Official-Website with MIT License 5 votes vote down vote up 
render() {
    const {
      startDate,
      endDate,
      status,
      location,
      formLink,
    } = this.props.details;

    return (
      <div className="row">
        <span className="col-md">
          <FontAwesomeIcon icon={faClock} size="1x" />
          <p className={`h6 m-0 p-0 ${styles["event-details_text"]}`}>
            {" "}
            From : {parseDate(startDate)}
          </p>
          <p className={`h6 m-0 p-0 ${styles["event-details_text"]}`}>
            {" "}
            To : {parseDate(endDate)}
          </p>
        </span>
        {location ? (
          <span className="col-md">
            <FontAwesomeIcon icon={faMapMarkerAlt} size="1x" />
            <p className={`h5 ${styles["event-details_text"]}`}>{location}</p>
          </span>
        ) : null}
        {formLink && status === "upcoming" ? (
          <span className="col-lg my-3">
            <a
              href={formLink}
              target="_blank"
              rel="noopener noreferrer"
              className={`rounded-pill ${styles["apply-btn"]}`}
            >
              Apply Now!
            </a>
          </span>
        ) : null}
      </div>
    );
  }
Example #4
Source File: Footer.js    From clayma-store with MIT License 4 votes vote down vote up 
export default function Footer() {
  const date = new Date();
  const dateyear = date.getFullYear();
  return (
    <div className="main-footer">
      <div className="main-footer-container">
        <div className="main-footer-content">
          <div className="row">
            <div className="col-lg-4">
              <h2>Clayma store</h2>
              <p>
                We are providing high quality services with 100% satisfaction
                guarantee.
              </p>
              <div className="main-footer-payment">
                <ul>
                  <li>
                    <a href="/">
                      <img
                        src={AmericanexpressCardIcon}
                        alt="americaExpress"
                      />
                    </a>
                  </li>
                  <li>
                    <a href="/">
                      <img src={CirrusCardIcon}
                       alt="CirrusCardIcon" />
                    </a>
                  </li>
                  <li>
                    <a href="/">
                      <img
                        src={MaterCardCardIcon}
                        alt="MaterCardCardIcon"
                      />
                    </a>
                  </li>
                  <li>
                    <a href="/">
                      <img src={PaypalCardIcon} 
                      alt="PaypalCardIcon" />
                    </a>
                  </li>
                  <li>
                    <a href="/">
                      <img src={VisaCardIcon} alt="VisaCardIcon" />
                    </a>
                  </li>
                </ul>
              </div>
            </div>
            <div className="col-lg-4">
              <h2>Contact us</h2>
              <h5>
                <FontAwesomeIcon icon={faMapMarker} className="footer-icons" />
                Empire Road, Somewhere , on Earth
              </h5>
              <h5>
                <FontAwesomeIcon icon={faPhone} className="footer-icons" />{" "}
                +2111 555 555 54
              </h5>
              <h5>
                <FontAwesomeIcon icon={faEnvelope} className="footer-icons" />{" "}
                [email protected]
              </h5>
              <h5>
                <FontAwesomeIcon icon={faGlobe} className="footer-icons" />{" "}
                www.claymastore.com
              </h5>

              <h3> Customer Care</h3>

              <h5>
                <FontAwesomeIcon icon={faClock} className="footer-icons" /> Mon.
                - Fri. 8am to 5pm
              </h5>
              <h5>
                <FontAwesomeIcon icon={faClock} className="footer-icons" /> Sat.
                8am to 11am
              </h5>
              <h5>
                <FontAwesomeIcon icon={faClock} className="footer-icons" /> Sun.
                <span> Closed</span>
              </h5>
            </div>
            <div className="col-lg-4">
              <h2>My Account</h2>
              <h5>Shopping Cart</h5>
              <h5>My Account</h5>
              <h5>Checkout</h5>
              <h5>Delivery</h5>
              <h5>Your Orders</h5>
            </div>
          </div>
        </div>
        <div className="row">
          <div className="col-lg-12 main-footer-copyright">
            <p>Copyright &copy; {dateyear}. All Right reserved.</p>
            <hr />
          </div>
        </div>
      </div>
    </div>
  );
}