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

The following examples show how to use @fortawesome/free-solid-svg-icons#faBellSlash. 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: CovidApp.js    From covid-19-tracker with MIT License 4 votes vote down vote up 
render() {
    const { classes, setDarkMode, isDarkMode } = this.props;
    const { mapData, isLoading, data, districtLevel, expanded, updates } =
      this.state;

    if (isLoading) {
      return (
        <div className={classes.loadingIcon}>
          <Lottie options={defaultOptions} height={500} width={500} />
        </div>
      );
    }
    let displayUpdates;
    try {
      displayUpdates = updates
        .slice(-5)
        .reverse()
        .map(({ update, timestamp }, i) => {
          update = update.replace('\n', '<br/>');
          return (
            <div className={classes.updateBox} key={i}>
              <h5 className={classes.updateHeading}>
                {`${formatDistance(
                  new Date(timestamp * 1000),
                  new Date()
                )} ago`}
              </h5>
              <h4
                className={classes.updateText}
                dangerouslySetInnerHTML={{
                  __html: update,
                }}
              ></h4>
            </div>
          );
        });
    } catch (err) {}

    return (
      <>
        <div className={classes.header}>
          <h1 className={classes.heading}>
            <span>Covid-19</span> India Trend
          </h1>
          <div className={classes.btnBox}>
            <FontAwesomeIcon
              icon={faSyncAlt}
              className={classes.button}
              onClick={this.fetchData}
            />
          </div>
          <div className={classes.lastUpdatedTime}>
            Last Updated:{' '}
            {this.formatDate(this.state.todayData.lastupdatedtime)}
          </div>
          <div className={classes.updates}>
            <div className={classes.notification}>
              {expanded ? (
                <FontAwesomeIcon
                  icon={faBellSlash}
                  onClick={this.handleNotification}
                />
              ) : (
                <div className={classes.notificationBell}>
                  <FontAwesomeIcon
                    icon={faBell}
                    onClick={this.handleNotification}
                  />
                </div>
              )}
            </div>
            {expanded && <div className={classes.update}>{displayUpdates}</div>}
          </div>
          <div className="darkModeButton">
            <label className="switch">
              <input
                type="checkbox"
                onChange={setDarkMode}
                checked={isDarkMode}
              />
              <span className="slider round"></span>
            </label>
          </div>
        </div>
        <div>
          <Overview
            isDarkMode={isDarkMode}
            data={this.state.todayData}
            loadingStatus={this.loadingStatus}
          />
        </div>
        <div className={classes.content}>
          <div className={classes.contentArea}>
            <div className={classes.mapArea}>
              <MapSection
                data={data}
                mapData={mapData}
                isDarkMode={isDarkMode}
              />
            </div>
          </div>
          <div className={classes.chartArea}>
            <div className={classes.chartRes}>
              <Charts
                data={this.state.casesTimeline}
                isLoading={this.state.isLoading}
              />
            </div>
            <div className={classes.tinyChartArea}>
              <div className={classes.tinyChart}>
                <div
                  className={classes.tinych}
                  style={{ background: 'rgba(249, 52, 94,.1)' }}
                >
                  <h3 style={{ color: colors.red }}>confirmed</h3>
                  <Barchart
                    data={this.state.casesTimeline}
                    isLoading={this.state.isLoading}
                    dataKey="totalconfirmed"
                    stroke={colors.red}
                  />
                </div>
              </div>
              <div className={classes.tinyChart}>
                <div
                  className={classes.tinych}
                  style={{ background: 'rgba(250, 100, 0,.1)' }}
                >
                  <h3 style={{ color: colors.orange }}>active</h3>
                  <Barchart
                    data={this.state.casesTimeline}
                    isLoading={this.state.isLoading}
                    dataKey="totalactive"
                    stroke={colors.orange}
                  />
                </div>
              </div>
              <div className={classes.tinyChart}>
                <div
                  className={classes.tinych}
                  style={{ background: 'rgba(28, 177, 66,.1)' }}
                >
                  <h3 style={{ color: colors.green }}>Recovered</h3>
                  <Barchart
                    data={this.state.casesTimeline}
                    isLoading={this.state.isLoading}
                    dataKey="totalrecovered"
                    stroke={colors.green}
                  />
                </div>
              </div>
              <div className={classes.tinyChart}>
                <div
                  className={classes.tinych}
                  style={{ background: 'rgba(98, 54, 255,.1)' }}
                >
                  <h3 style={{ color: colors.purple }}>Deceased</h3>
                  <Barchart
                    data={this.state.casesTimeline}
                    isLoading={this.state.isLoading}
                    dataKey="totaldeceased"
                    stroke={colors.purple}
                  />
                </div>
              </div>
            </div>
          </div>
          <div className={classes.tableContainer}>
            <h2 className={classes.tableHeading}>
              State/UT Wise Data (Sortable){' '}
            </h2>
            <DisplayTable
              tableData={data}
              districtLevel={districtLevel}
              isDarkMode={isDarkMode}
            />
          </div>
        </div>
        <Footer />
      </>
    );
  }