src/components/common/TotalCasesCount.js
//component for total counting of country
component for total counting of country
component for total counting of country
function TotalCasesCount({ nationalCount, ...props }) {
  const nationalCountStyle = props.darkMode
    ? "nationalcountdark"
    : "nationalcountlight";
  return (
    <div className="container-fluid">
      <div className="row">
        <div className="col-lg">
          <div className={props.darkMode ? "asondark" : "asonlight"}>
            {tableHeader.AS_ON +
              formatDate(
                dateConvertToLocalTimeZone(nationalCount.lastupdatedtime)
              )}
          </div>
        </div>
      </div>
      <div className="row">
        {
          <React.Fragment key={nationalCount + "Fragment"}>
            <div
              className={`col ${nationalCountStyle} text-center`}
              key={nationalCount.confirmed}
            >
              <div>{tableHeader.CONFIRMED}</div>
              <div className="totalconfirmed">
                <div className="totaldeltaconfirmed">
                  {props.deltaConfirmed >= 0 ? (
                    "+" + formatNumbersWithComma(props.deltaConfirmed)
                  ) : (
                    <i className={tableHeader.HOURGLASS_ICON}></i>
                  )}
                </div>
                {formatNumbersWithComma(nationalCount.confirmed)}
              </div>
            </div>
            <div
              className={`col ${nationalCountStyle} text-center`}
              key={nationalCount.active}
            >
              <div>{tableHeader.ACTIVE}</div>
              <div className="totalactive">
                <div className="totaldeltaactive">
                  {props.deltaActive >= 0
                    ? "+" + formatNumbersWithComma(props.deltaActive)
                    : tableHeader.NA}
                </div>
                {formatNumbersWithComma(nationalCount.active)}
              </div>
            </div>
            <div
              className={`col ${nationalCountStyle} text-center`}
              key={nationalCount.recovered}
            >
              <div>{tableHeader.RECOVERED}</div>
              <div className="totalrecovered">
                <div className="totaldeltarecovered">
                  {props.deltaRecovered >= 0 ? (
                    "+" + formatNumbersWithComma(props.deltaRecovered)
                  ) : (
                    <i className={tableHeader.HOURGLASS_ICON}></i>
                  )}
                </div>
                {formatNumbersWithComma(nationalCount.recovered)}
              </div>
            </div>
            <div
              className={`col ${nationalCountStyle} text-center`}
              key={nationalCount.deaths}
            >
              <div>{tableHeader.DEATHS}</div>
              <div className="totaldeaths">
                <div className="totaldeltadeaths">
                  {props.deltaDeaths >= 0 ? (
                    "+" + formatNumbersWithComma(props.deltaDeaths)
                  ) : (
                    <i className={tableHeader.HOURGLASS_ICON}></i>
                  )}
                </div>
                {formatNumbersWithComma(nationalCount.deaths)}
              </div>
            </div>
          </React.Fragment>
        }
      </div>
    </div>
  );
}
function TotalCasesCount ( { nationalCount , ... props } ) { const nationalCountStyle = props . darkMode ? "nationalcountdark" : "nationalcountlight" ; return ( < div className = "container-fluid" > < div className = "row" > < div className = "col-lg" > < div className = { props . darkMode ? "asondark" : "asonlight" } > { tableHeader . AS_ON + formatDate ( dateConvertToLocalTimeZone ( nationalCount . lastupdatedtime ) ) } < / div > < / div > < / div > < div className = "row" > { < React . Fragment key = { nationalCount + "Fragment" } > < div className = { ` ${ nationalCountStyle } ` } key = { nationalCount . confirmed } > < div > { tableHeader . CONFIRMED } < / div > < div className = "totalconfirmed" > < div className = "totaldeltaconfirmed" > { props . deltaConfirmed >= 0 ? ( "+" + formatNumbersWithComma ( props . deltaConfirmed ) ) : ( < i className = { tableHeader . HOURGLASS_ICON } > < / i > ) } < / div > { formatNumbersWithComma ( nationalCount . confirmed ) } < / div > < / div > < div className = { ` ${ nationalCountStyle } ` } key = { nationalCount . active } > < div > { tableHeader . ACTIVE } < / div > < div className = "totalactive" > < div className = "totaldeltaactive" > { props . deltaActive >= 0 ? "+" + formatNumbersWithComma ( props . deltaActive ) : tableHeader . NA } < / div > { formatNumbersWithComma ( nationalCount . active ) } < / div > < / div > < div className = { ` ${ nationalCountStyle } ` } key = { nationalCount . recovered } > < div > { tableHeader . RECOVERED } < / div > < div className = "totalrecovered" > < div className = "totaldeltarecovered" > { props . deltaRecovered >= 0 ? ( "+" + formatNumbersWithComma ( props . deltaRecovered ) ) : ( < i className = { tableHeader . HOURGLASS_ICON } > < / i > ) } < / div > { formatNumbersWithComma ( nationalCount . recovered ) } < / div > < / div > < div className = { ` ${ nationalCountStyle } ` } key = { nationalCount . deaths } > < div > { tableHeader . DEATHS } < / div > < div className = "totaldeaths" > < div className = "totaldeltadeaths" > { props . deltaDeaths >= 0 ? ( "+" + formatNumbersWithComma ( props . deltaDeaths ) ) : ( < i className = { tableHeader . HOURGLASS_ICON } > < / i > ) } < / div > { formatNumbersWithComma ( nationalCount . deaths ) } < / div > < / div > < / React . Fragment > } < / div > < / div > ) ; }
component for total counting of country
component for total counting of country
//specific styling for dark mode vs light mode // using icon if negative numbers found as awaiting proper data instead of '--'