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

ArtCourseDetail = ({ className }) => {
  const currikiUtility = classNames("curriki-utility-artcourse", className);
  return (
    <div className={currikiUtility}>
      <div className="artcourse-img">
        <img src={ArtCourseImage} alt="ArtCourseImage" />
      </div>
      <div className="artcourse-detail">
        <HeadingThree text="Description" color="#084892" />
        <HeadingText
          text="Ed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur."
          color="#515151"
          className="artcourse-description"
        />
        <div className="artcourse-links-icons">
          <div className="link-icons">
            <a href="#" className="artcourse_link">
              <FontAwesomeIcon
                icon={faExternalLinkAlt}
                className="artcourse-icon"
              />
              Share project
            </a>
            <a href="#" className="artcourse_link">
              <FontAwesomeIcon icon={faEye} className="artcourse-icon" />
              Preview
            </a>
            <a href="#" className="artcourse_link">
              <FontAwesomeIcon icon={faTrashAlt} className="artcourse-icon" />
              Delete
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}

MyTeamCard = ({ className, backgroundImg, title, description }) => {
  const currikiUtility = classNames(
    "curriki-utility-myproject-card",
    className
  );
  return (
    <div className={currikiUtility}>
      <div
        className="myproject-card-top"
        style={{ backgroundImage: `url(${backgroundImg})` }}
      >
        <div className="myproject-card-dropdown">
          <ActivityCardDropDown iconColor="white" />
        </div>
        <div className="myproject-card-title">
          <h2>{title}</h2>
        </div>
      </div>
      <div className="myproject-card-detail">
        <p>
          {description}
        </p>
      </div>
      <div className="my-project-icons">
        <FontAwesomeIcon icon={faEye} color="#084892" className="icon-edit" />
        <FontAwesomeIcon icon={faEdit} color="#084892" className="icon-edit" />
        <FontAwesomeIcon icon={faLink} color="#084892" className="icon-edit" />
      </div>
    </div>
  );
}

ProjectDetailList = () => {
  const playList1 = [
    { title: "Activity #1" },
    { title: "Activity #2" },
    { title: "My first activity", status: "Shared" },
  ];
  const playList2 = [
    { title: "Activity #1" },
    { title: "Activity #2" },
    { title: "My first activity", status: "Shared" },
    { title: "Activity #2" },
    { title: "Activity #2", status: "Shared" },
  ];

  const [openMyProject, setOpenMyProject] = useState(false);
  const [uploadImageStatus, setUploadImageStatus] = useState(false);
  return (
    <>
      <div className="myproject-playlist">
        <div className="content-wrapper">
          <div className="inner-content">
            <div className="topHeading-playlist-detail">
              <div className="topHeading-creation-btn">
                <div>
                  <TopHeading
                    description="Nevada Department of Education"
                    image={projectFolder}
                    heading="Design, Art & History"
                    color="#084892"
                    className="heading-style"
                  />
                </div>
                <div className="playlist-creation-btn">
                  <Buttons
                    secondary={true}
                    text="Create new playlist"
                    icon={faPlus}
                    width="189px"
                    height="35px"
                    hover={true}
                    className="btn-margin"
                  />
                  <Buttons
                    primary={true}
                    text="Project Preview"
                    icon={faEye}
                    width="162px"
                    height="35px"
                    hover={true}
                  />
                </div>
              </div>
            </div>
            <div className="topHeading-playlist-project-title">
              <HeadingThree text="Project name" color="#084892" />
            </div>
            <div className="project-playlist-card">
              <div className="playlist-card">
                <ProjectList
                  projectTitle="Playlist name #2"
                  playList={playList1}
                />
              </div>
              <div className="playlist-card">
                <ProjectList
                  projectTitle="Playlist name #3"
                  playList={playList2}
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

render() {
    const { listrois, selected } = this.props;
    return (
      <div style={styles.layersWrapper}>
        {listrois &&
          listrois.map((rois, index) => {
            //Fix coloring of layer panel
            return (
              <div
                style={{
                  ...styles.layer,
                  borderColor: selected == index ? highlightColor : borderColor
                }}
                key={index}
                onClick={() => {}}
              >
                <div
                  style={{
                    ...styles.eyeWrapper,
                    borderColor:
                      selected == index ? highlightColor : borderColor
                  }}
                  onClick={() => {
                    this.props.onEyeClick(index);
                  }}
                >
                  {rois.visible ? (
                    <FontAwesomeIcon
                      onClick={() => {
                        this.props.onEyeClick;
                      }}
                      icon={faEye}
                      style={styles.eye}
                    />
                  ) : (
                    <FontAwesomeIcon
                      onClick={() => {
                        this.props.onEyeClick;
                      }}
                      icon={faEyeSlash}
                      style={styles.eye}
                    />
                  )}
                </div>
                <div
                  style={styles.textWrapper}
                  onClick={() => {
                    this.props.setSelected(index);
                  }}
                >
                  <span>{rois.label.title}</span>
                  <span>{rois.label.type}</span>
                </div>
                <div
                  style={styles.timeWrapper}
                  onClick={() => {
                    this.props.setSelected(index);
                  }}
                >
                  {rois.numSeconds}
                  <FontAwesomeIcon
                    onClick={() => {
                      this.props.onDeleteClick(index);
                    }}
                    icon={faTrash}
                    style={styles.eye}
                  />
                </div>
              </div>
            );
          })}
      </div>
    );
  }

library.add(
    faArrowAltCircleUp,
    faCog,
    faEdit,
    faEye,
    faEyeSlash,
    faList,
    faPause,
    faPlay,
    faPlus,
    faSearch,
    faTachometerAlt,
    faTimes,
    faTimesCircle,
    faTrash,
    faCheckCircle,
    faStream,
    faSave,
    faExclamationCircle,
    faBullhorn,
    faArrowsAltV,
    faUnlink,
    faQuestionCircle,
    faImages,
    faUpload,
    faCopy,
    faCheck,
    faFile,
    faAward,
    faLink,
    faChevronDown,
    faSignOutAlt,
    faPen,
    faExternalLinkSquareAlt,
    faSpinner,
    faUndo,
    faPlusCircle,
    faAngleDown,
    faLink,
);

library.add(faEyeSlash, faEye);

TabsBar = (props) => {
  const {
    tabs,
    tabIndex,
    handleTabChange,
    handleNewTab,
    handleRemoveTab,
  } = props;

  return (
    <div>
      {/* Tabs Bar */}
      <div className="content__tabBar">
        <div className="content__tabBarRow">
          <div className="content__tabBarColumn" id="content__tabBarTabs">
            <div className="content__tabsRow">
              {/* Tabs */}
              {tabs.map((tab, index) => {
                return (
                  <div
                    key={index}
                    onClick={() => {
                      handleTabChange(index);
                    }}
                    className={
                      index === tabIndex
                        ? "content__requestTab active"
                        : "content__requestTab "
                    }
                  >
                    <span className="content__requestType">{tab.type}</span>
                    {tab.name}
                    <FontAwesomeIcon
                      icon={faTimes}
                      onClick={() => handleRemoveTab(tab)}
                      className="content__requestTabCloseIcon"
                    />
                  </div>
                );
              })}
              <div
                className="content__requestTab"
                id="content__requestTabAddTab"
                onClick={handleNewTab}
              >
                <FontAwesomeIcon icon={faPlus} />
              </div>
            </div>
          </div>
          <div className="content__tabBarColumn content__tabBarOptionsWrapper">
            <input value="DEV" className="content__tabBarSelect" />
            <button className="content__button">
              <FontAwesomeIcon icon={faEye} />
            </button>
            <button className="content__button">
              <FontAwesomeIcon icon={faCog} />
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

AddVideoCard = ({
  setModalShow,
  setCurrentActivity,
  setScreenStatus,
  setOpenVideo,
  className,
  data,
  selectionStatus = false,
  setAddActivityPopUp,
}) => {
  const [changeAddActivityPopUp, setChangeAddActivityPopUp] = useState(false);
  const currikiUtility = classNames("curriki-utility-addvideo-card", className);
  const dispatch = useDispatch();
  const { activeOrganization } = useSelector((state) => state.organization);
  const primaryColor = getGlobalColor("--main-primary-color");
  return (
    <>
      <div className={currikiUtility}>
        <div
          className="addvideo-card-top"
          style={{
            backgroundImage: `url(${
              data.thumb_url?.includes("pexels.com")
                ? data.thumb_url
                : global.config.resourceUrl + data.thumb_url
            })`,
          }}
        >
          <div className="addvideo-card-dropdown">
            <DropDownEdit data={data} iconColor="white" />
          </div>
          <div className="addvideo-card-title">
            <h2>{data.title}</h2>
          </div>
        </div>
        <div className="addvideo-card-detail">
          <p>{data.description?.slice(0, 50)}</p>
        </div>

        <div className="addvideo-card-add-share">
          <div className="btn-box">
            <div
              className="addvideo-card-add-share-options"
              onClick={() => {
                setCurrentActivity(data.id);
                setModalShow(true);
              }}
            >
              <FontAwesomeIcon
                icon={faEye}
                style={{ marginRight: "6px" }}
                color={primaryColor}
              />
              View &nbsp;&nbsp;&nbsp;
            </div>
            <div
              onClick={() => {
                setCurrentActivity(data.id);
                setModalShow(true);
              }}
            ></div>
            <div
              onClick={async () => {
                toast.dismiss();
                toast.info("Loading Activity ...", {
                  className: "project-loading",
                  closeOnClick: false,
                  closeButton: false,
                  position: toast.POSITION.BOTTOM_RIGHT,
                  autoClose: 10000,
                  icon: "",
                });
                const result = await videoServices.videoh5pDetail(
                  activeOrganization.id,
                  data.id
                );
                if (result.activity?.brightcoveData) {
                  dispatch({
                    type: "EDIT_CMS_SCREEN",
                    payload: result.activity?.brightcoveData.accountId,
                  });
                  window.brightcoveAccountId =
                    result.activity?.brightcoveData.accountId;
                }

                toast.dismiss();
                dispatch({
                  type: "ADD_VIDEO_URL",
                  platform: "",
                });
                dispatch({
                  type: "SET_ACTIVE_VIDEO_SCREEN",
                  payload: result.activity,
                });

                setOpenVideo(true);
                setScreenStatus("AddVideo");
              }}
            >
              <FontAwesomeIcon
                icon={faEdit}
                style={{ marginRight: "6px" }}
                color={primaryColor}
              />
              Edit
            </div>
          </div>
        </div>
        {selectionStatus && (
          <div className="addvideo-selection-box">
            <input type="checkbox" />
            <span>Select</span>
          </div>
        )}
      </div>
    </>
  );
}

render() {
        let t = this.props.t;
        let userStyle = {};
        if (this.props.user?.faveColor) {
            userStyle.color = this.props.user.faveColor;
        }
        let userClass = 'username' + (this.props.user.role ? ` ${this.props.user.role.toLowerCase()}-role` : '');

        let playerAvatar = (
            <div className='state'>
                <Avatar imgPath={this.props.user?.avatar} />
                <b className={userClass} style={userStyle}>{this.props.user?.username || t('Noone')}</b>
            </div>
        );

        let statsClass = classNames('panel player-stats', {
            'active-player': this.props.activePlayer
        });

        let firstPlayerToken = this.props.firstPlayer ? (
            <div className='state'>
                <img src={FirstPlayerImage} title='First Player' />
            </div>
        ) : (
            ''
        );

        return (
            <div className={statsClass}>
                {playerAvatar}
                {this.renderLifeRemaining()}
                {this.renderActions()}
                {firstPlayerToken}
                {this.props.activePlayer && (
                    <div className='state first-player-state'>
                        <Trans>Active Player</Trans>
                    </div>
                )}

                {this.props.showMessages && (
                    <div className='state chat-status'>
                        <div className='state'>
                            <a href='#' className='pr-1 pl-1' title='Show dice/card history'>
                                <FontAwesomeIcon
                                    icon={faHistory}
                                    onClick={this.props.onDiceHistoryClick}
                                ></FontAwesomeIcon>
                            </a>
                        </div>
                        <div className='state'>
                            <a href='#' className='pr-1 pl-1' title='Mute spectators'>
                                <FontAwesomeIcon
                                    icon={this.props.muteSpectators ? faEyeSlash : faEye}
                                    onClick={this.props.onMuteClick}
                                ></FontAwesomeIcon>
                            </a>
                        </div>
                        {this.props.showManualMode && (
                            <div className='state'>
                                <a
                                    href='#'
                                    className={this.props.manualModeEnabled ? 'text-danger' : ''}
                                    onClick={this.props.onManualModeClick}
                                >
                                    <FontAwesomeIcon icon={faWrench}></FontAwesomeIcon>
                                    <span className='ml-1'>
                                        <Trans>Manual Mode</Trans>
                                    </span>
                                </a>&nbsp;
                                <a href='#' className='pr-1 pl-1' title='Show manual command list'>
                                    <FontAwesomeIcon
                                        icon={faList}
                                        onClick={this.props.onManualCommandsClick}
                                    />
                                </a>
                            </div>
                        )}
                        <div className='state'>
                            <a
                                href='#'
                                onClick={this.onSettingsClick.bind(this)}
                                className='pr-1 pl-1'
                            >
                                <FontAwesomeIcon icon={faCogs}></FontAwesomeIcon>
                                <span className='ml-1'>
                                    <Trans>Settings</Trans>
                                </span>
                            </a>
                        </div>
                        <div className='state'>
                            <a href='#' className='pr-1 pl-1' title='Copy chat to clipboard'>
                                <FontAwesomeIcon
                                    icon={faCopy}
                                    onClick={this.writeChatToClipboard.bind(this)}
                                ></FontAwesomeIcon>
                            </a>
                        </div>
                        <div>
                            <a
                                href='#'
                                onClick={this.props.onMessagesClick}
                                className='pl-1'
                                title='Toggle chat'
                            >
                                <FontAwesomeIcon icon={faComment}></FontAwesomeIcon>
                                {this.props.numMessages > 0 && (
                                    <Badge variant='danger'>{this.props.numMessages}</Badge>
                                )}
                            </a>
                        </div>
                    </div>
                )}
            </div>
        );
    }

export default function PopularProducts() {
  const { addToast } = useToasts();
  const { addItemTocart } = useContext(GlobalCartContext);

  function handleAddToCart(data) {
    const newCartItem = {
      productname: data.productname,
      id: data.id,
      price: data.price,
      discount: data.discount,
      color: data.color,
      size: data.size,
      selectedSize: data.size[0],
      product_status: data.product_status,
      product_stock: data.product_stock,
      product_selected_qty: 1,
      product_image: data.product_image,
      brand: data.brand,

      product_details: data.product_details,
    };
    addItemTocart(newCartItem);
    addToast(data.productname + " has been saved for later shopping", {
      appearance: "success",
      autoDismiss: true,
    });
  }

  const data = PopularProductData.map((product) => {
    return (
      <div className="popular-product" key={product.id}>
        <div className="card-product">
          <img
            src={require("../assets/products/allproducts/" +
              product.product_image)}
            alt={product.product_image}
          />

          <div className="card-product-extra-info">
            <div className="card-product-icon">
              <span
                className="card-product-cart-icon add-to-cart-icon"
                onClick={() => handleAddToCart(product)}
              >
                <FontAwesomeIcon icon={faShoppingBasket} />
              </span>

              <span>
                <Link
                  className="card-product-cart-icon"
                  to={`/catalog/item/${product.id}/${product.productname}`}
                >
                  <FontAwesomeIcon icon={faEye} />
                </Link>
              </span>
            </div>

            <h4>{product.productname}</h4>

            {product.discount > 0 ? (
              <h2>
                <span className="product-price-after-discount">
                  {new Intl.NumberFormat("en-US", {
                    style: "currency",
                    currency: "ZAR",
                  }).format(
                    product.price - (product.price * product.discount) / 100
                  )}
                </span>{" "}
                <span className="product-price-before-discount">
                  {new Intl.NumberFormat("en-US", {
                    style: "currency",
                    currency: "ZAR",
                  }).format(product.price)}
                </span>{" "}
                <span className="product-discount-rate">
                  -{product.discount}%{" "}
                </span>
              </h2>
            ) : (
              <h2>
                {" "}
                <span className="product-price-whit-no-discount">
                  {new Intl.NumberFormat("en-US", {
                    style: "currency",
                    currency: "ZAR",
                  }).format(product.price)}
                </span>
              </h2>
            )}
          </div>
        </div>
      </div>
    );
  });
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 3,
    slidesToScroll: 1,
    initialSlide: 0,

    lazyLoad: true,
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 1,
          infinite: true,
          dots: true,
        },
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
          initialSlide: 0,
        },
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
        },
      },
    ],
  };

  return (
    <div className="container-popular-products">
      <h1>Customer Favorites</h1>

      <Slider {...settings} className="popular-product-large-screen">
        {data}
      </Slider>
    </div>
  );
}

render() {
    const { looseFilesIsDisplayed } = this.state;

    const {
      closePath, filterFunc, idToken, looseFileList, moveExternal,
      moveWithin, openFolder, openFolderList, refreshFunc, removeFunc, sortFunc,
      topLevelFolderList, updatePath, userId,
    } = this.props;

    const { name, email, picture } = parseIDToken(idToken);
    const createFunc = loadAuthParam(email, this.create);
    return (
      <ContextMenuTrigger className="user" id={userId.toString()}>
        <button
          type="button"
          className="user-banner"
          onClick={() => this.viewToggle()}
          onKeyDown={() => this.viewToggle()}
        >
          <img className="profile-picture" src={picture} alt="Account profile" />
          <span className="profile-text">
            {' '}
            <span className="profile-name">{name}</span>
            {' '}
            <span className="profile-email">
              (
              {email}
              )
            </span>
          </span>
          <ContextMenuTrigger className="context-menu" id={userId.toString()} holdToDisplay={0}>
            <FontAwesomeIcon className="fa-ellipsis menu-icon" icon={faEllipsisV} size="lg" onClick={(event) => this.handleIconClick(event, () => {})} title="Options" />
          </ContextMenuTrigger>
        </button>
        <ContextMenu className="context-menu" id={userId.toString()}>
          <MenuItem className="menu-item upload">
            <SubMenu
              className="context-menu sub-menu-upload"
              title={
              (
                <span>
                  <FontAwesomeIcon className="fa-plus menu-icon" icon={faPlus} onClick={(event) => this.handleIconClick(event, () => {})} />
                  Create New...
                </span>
              )
            }
            >
              <MenuItem className="menu-item" onClick={() => createFunc('application/vnd.google-apps.folder', 'New Folder')}>
                <FontAwesomeIcon className="fa-folder menu-icon" icon={faFolderPlus} />
                Folder
              </MenuItem>
              <hr className="divider" />
              <MenuItem className="menu-item" onClick={() => createFunc('application/vnd.google-apps.document', 'New Doc')}>
                <img className="menu-icon" src="https://drive-thirdparty.googleusercontent.com/16/type/application/vnd.google-apps.document" alt="Google Doc icon" />
                Google Doc
              </MenuItem>
              <MenuItem className="menu-item" onClick={() => createFunc('application/vnd.google-apps.spreadsheet', 'New Sheet')}>
                <img className="menu-icon" src="https://drive-thirdparty.googleusercontent.com/16/type/application/vnd.google-apps.spreadsheet" alt="Google Speardsheet icon" />
                Google Sheets
              </MenuItem>
              <MenuItem className="menu-item" onClick={() => createFunc('application/vnd.google-apps.presentation', 'New Presentation')}>
                <img className="menu-icon" src="https://drive-thirdparty.googleusercontent.com/16/type/application/vnd.google-apps.presentation" alt="Google Slides icon" />
                Google Slides
              </MenuItem>
              <MenuItem className="menu-item" onClick={() => createFunc('application/vnd.google-apps.form', 'New Form')}>
                <img className="menu-icon" src="https://drive-thirdparty.googleusercontent.com/16/type/application/vnd.google-apps.form" alt="Google Forms icon" />
                Google Forms
              </MenuItem>
            </SubMenu>
          </MenuItem>
          <label htmlFor={email}>
            <MenuItem className="menu-item">
              <FontAwesomeIcon className="fa-upload menu-icon" icon={faUpload} />
              <input
                type="file"
                id={email}
                className="file-input"
                onChange={(e) => this.uploadController(e, idToken)}
                multiple
              />
              Upload
            </MenuItem>
          </label>
          <MenuItem className="menu-item" onClick={(event) => this.handleIconClick(event, () => this.toggleLoose())}>
            <FontAwesomeIcon className="fa-eye-slash menu-icon" icon={(looseFilesIsDisplayed) ? faEyeSlash : faEye} />
            Toggle Folder View
          </MenuItem>
          <MenuItem className="menu-item" onClick={(event) => this.handleIconClick(event, () => refreshFunc(userId))}>
            <FontAwesomeIcon className="fa-sync menu-icon" icon={faSyncAlt} />
            Refresh Account
          </MenuItem>
          <MenuItem className="menu-item" onClick={(event) => this.handleIconClick(event, () => removeFunc(userId))}>
            <FontAwesomeIcon className="fa-trash menu-icon" icon={faTrash} />
            Remove Account
          </MenuItem>
        </ContextMenu>
        <div style={{ display: 'none' }} className="Files/Folders" ref={this.props.forwardRef}>
          <Filters
            filterFunc={filterFunc}
            sortFunc={sortFunc}
            userId={userId}
          />
          <TopLevelFolderList
            email={email}
            userId={userId}
            topLevelFolderList={topLevelFolderList}
            shareFile={loadAuthParam(email, this.shareFile)}
            moveWithin={moveWithin}
            moveExternal={moveExternal}
            refreshFunc={refreshFunc}
            openFolder={openFolder}
          />
          <OpenFolderList
            email={email}
            userId={userId}
            openFolderList={openFolderList}
            shareFile={loadAuthParam(email, this.shareFile)}
            moveWithin={moveWithin}
            moveExternal={moveExternal}
            refreshFunc={refreshFunc}
            openFolder={openFolder}
            closePath={closePath}
            updatePath={updatePath}
          />
          {looseFilesIsDisplayed && (
            <LooseFileList
              email={email}
              userId={userId}
              looseFileList={looseFileList}
              shareFile={loadAuthParam(email, this.shareFile)}
              moveWithin={moveWithin}
              moveExternal={moveExternal}
              refreshFunc={refreshFunc}
            />
          )}
        </div>
      </ContextMenuTrigger>
    );
  }

TransactionsTable = () => {
  const totalTransactions = transactions.length;

  const TableRow = (props) => {
    const { invoiceNumber, subscription, price, issueDate, dueDate, status } = props;
    const statusVariant = status === "Paid" ? "success"
      : status === "Due" ? "warning"
        : status === "Canceled" ? "danger" : "primary";

    return (
      <tr>
        <td>
          <Card.Link as={Link} to={Routes.Invoice.path} className="fw-normal">
            {invoiceNumber}
          </Card.Link>
        </td>
        <td>
          <span className="fw-normal">
            {subscription}
          </span>
        </td>
        <td>
          <span className="fw-normal">
            {issueDate}
          </span>
        </td>
        <td>
          <span className="fw-normal">
            {dueDate}
          </span>
        </td>
        <td>
          <span className="fw-normal">
            ${parseFloat(price).toFixed(2)}
          </span>
        </td>
        <td>
          <span className={`fw-normal text-${statusVariant}`}>
            {status}
          </span>
        </td>
        <td>
          <Dropdown as={ButtonGroup}>
            <Dropdown.Toggle as={Button} split variant="link" className="text-dark m-0 p-0">
              <span className="icon icon-sm">
                <FontAwesomeIcon icon={faEllipsisH} className="icon-dark" />
              </span>
            </Dropdown.Toggle>
            <Dropdown.Menu>
              <Dropdown.Item>
                <FontAwesomeIcon icon={faEye} className="me-2" /> View Details
              </Dropdown.Item>
              <Dropdown.Item>
                <FontAwesomeIcon icon={faEdit} className="me-2" /> Edit
              </Dropdown.Item>
              <Dropdown.Item className="text-danger">
                <FontAwesomeIcon icon={faTrashAlt} className="me-2" /> Remove
              </Dropdown.Item>
            </Dropdown.Menu>
          </Dropdown>
        </td>
      </tr>
    );
  };

  return (
    <Card border="light" className="table-wrapper table-responsive shadow-sm">
      <Card.Body className="pt-0">
        <Table hover className="user-table align-items-center">
          <thead>
            <tr>
              <th className="border-bottom">#</th>
              <th className="border-bottom">Bill For</th>
              <th className="border-bottom">Issue Date</th>
              <th className="border-bottom">Due Date</th>
              <th className="border-bottom">Total</th>
              <th className="border-bottom">Status</th>
              <th className="border-bottom">Action</th>
            </tr>
          </thead>
          <tbody>
            {transactions.map(t => <TableRow key={`transaction-${t.invoiceNumber}`} {...t} />)}
          </tbody>
        </Table>
        <Card.Footer className="px-3 border-0 d-lg-flex align-items-center justify-content-between">
          <Nav>
            <Pagination className="mb-2 mb-lg-0">
              <Pagination.Prev>
                Previous
              </Pagination.Prev>
              <Pagination.Item active>1</Pagination.Item>
              <Pagination.Item>2</Pagination.Item>
              <Pagination.Item>3</Pagination.Item>
              <Pagination.Item>4</Pagination.Item>
              <Pagination.Item>5</Pagination.Item>
              <Pagination.Next>
                Next
              </Pagination.Next>
            </Pagination>
          </Nav>
          <small className="fw-bold">
            Showing <b>{totalTransactions}</b> out of <b>25</b> entries
          </small>
        </Card.Footer>
      </Card.Body>
    </Card>
  );
}