react-icons/fi#FiPlus JavaScript Examples

MapZoomButton = ({ onZoomIn, onZoomOut }) => {
  return (
    <StBtnWrapper>
      <StButton className="plusBtn" position="relative" onClick={onZoomIn}>
        <FiPlus fontSize="2.4rem" />
      </StButton>
      <StLine />
      <StButton className="minusBtn" position="relative" onClick={onZoomOut}>
        <FiMinus fontSize="2.4rem" />
      </StButton>
    </StBtnWrapper>
  );
}

function App({ app, index, onListUpdate }) {
  return (
    <Draggable draggableId={app._id} index={index}>
      {(provided) => (
        <div
          className={styles.appCard}
          ref={provided.innerRef}
          {...provided.draggableProps}
          {...provided.dragHandleProps}
        >
          <SingleApp app={app} pack={true} displaySelect={false}/>
          <button
            className={styles.unselectApp}
            onClick={() => onListUpdate(app._id)}
            aria-label={"Remove app from pack"}
          >
            <FiPlus />
          </button>
        </div>
      )}
    </Draggable>
  );
}

PlusButton = ({ ...rest }) => {
  return (
    <StCounterButton btnType="circle" fontSize="1.7rem" {...rest}>
      <FiPlus strokeWidth="3px" />
    </StCounterButton>
  );
}

App = ({ data }) => {
  const [selected, setSelected] = useState(false);
  const { selectedApps, setSelectedApps } = useContext(SelectedContext);

  useEffect(() => {
    let found = selectedApps.find((a) => a._id === data._id);

    setSelected(found);
  }, [ data, selectedApps ])

  let handleAppSelect = () => {
    let found = selectedApps.findIndex((a) => a._id === data._id);

    if (found !== -1) {
      let updatedSelectedApps = selectedApps.filter(
        (a, index) => index !== found
      );

      setSelectedApps(updatedSelectedApps);
      setSelected(false);

    } else if(data) {
      setSelected(true);

      setSelectedApps([...selectedApps, data]);
    }

  };

  return (
    <div className={`${styles.appContainer} ${selected ? styles.selected : null}`}>
  
      <Link href="/apps/[id]" as={`/apps/${data._id}`} prefetch={false}>
        <a>
          <AppIcon name={data.name} icon={data.icon} id={data._id}/>
          <h4>{data.name}</h4>
        </a>
      </Link>

      <button
        className={styles.selectApp}
        onClick={handleAppSelect}
        aria-label={selected ? "Unselect app" : "Select app"}
      >
        <FiPlus/>
      </button>
    </div>
  )
}

function Home({ popular, apps, recommended, error}) {
  if(error) {
    return <Error title="Oops!" subtitle={error}/>
  }

  return (
    <div>
      <MetaTags title="winstall - GUI for Windows Package Manager" />
      <div className={styles.intro}>
        <div className="illu-box">
          <h1>
            Bulk install Windows apps quickly with Windows Package Manager.
          </h1>
          <div className="art">
            <img
              src="/assets/logo.svg"
              draggable={false}
              alt="winstall logo"
            />
          </div>
        </div>
        <Search apps={apps} limit={4}/>
      </div>

      <PopularApps apps={popular} all={apps} />

      {/* <RecentApps apps={recents} /> */}
      <Recommendations packs={recommended}/>

      <FeaturePromoter art="/assets/packsPromo.svg" promoId="packs">
            <h3>Introducing Packs</h3>
            <h1>Curate and share the apps you use daily.</h1>
            <div className="box2">
                <Link href="/packs/create"><button className="button spacer accent" id="starWine"><FiPlus/> Create a pack</button></Link>
                <Link href="/packs/"><button className="button"><FiPackage/> View packs</button></Link>
            </div>
      </FeaturePromoter>

      <Footer />
    </div>
  );
}

SearchGuestsPopup = forwardRef(
  ({ type, searchData, increaseGuestCount, decreaseGuestCount }, ref) => {
    const { guests } = searchData;
    const { adult, child, infant } = guests;

    return (
      <StSearchGuestsPopupWrapper ref={ref}>
        <StSearchGuestsPopup popupState={type === 'guests'}>
          <StSearchGuestsList>
            <StSearchGuestsItem>
              <StSearchGuestsTextWrapper>
                <StSearchGuestsType>성인</StSearchGuestsType>
                <StSearchGuestsTypeAge>만 13세 이상</StSearchGuestsTypeAge>
              </StSearchGuestsTextWrapper>
              <StSearchGuestsCountWrapper>
                <StSearchGuestsCountBtn
                  btnType="circle"
                  minusBtn
                  guestCount={adult}
                  onClick={() => decreaseGuestCount(guests, 'adult')}
                >
                  <FiMinus></FiMinus>
                </StSearchGuestsCountBtn>
                <StSearchGuestsCount>{adult}</StSearchGuestsCount>

                <StSearchGuestsCountBtn
                  btnType="circle"
                  onClick={() => increaseGuestCount(guests, 'adult')}
                >
                  <FiPlus></FiPlus>
                </StSearchGuestsCountBtn>
              </StSearchGuestsCountWrapper>
            </StSearchGuestsItem>
            <StSearchGuestsItem>
              <StSearchGuestsTextWrapper>
                <StSearchGuestsType>어린이</StSearchGuestsType>
                <StSearchGuestsTypeAge>2~12세</StSearchGuestsTypeAge>
              </StSearchGuestsTextWrapper>
              <StSearchGuestsCountWrapper>
                <StSearchGuestsCountBtn
                  btnType="circle"
                  minusBtn
                  guestCount={child}
                  onClick={() => decreaseGuestCount(guests, 'child')}
                >
                  <FiMinus></FiMinus>
                </StSearchGuestsCountBtn>
                <StSearchGuestsCount>{child}</StSearchGuestsCount>
                <StSearchGuestsCountBtn
                  btnType="circle"
                  onClick={() => increaseGuestCount(searchData.guests, 'child')}
                >
                  <FiPlus></FiPlus>
                </StSearchGuestsCountBtn>
              </StSearchGuestsCountWrapper>
            </StSearchGuestsItem>
            <StSearchGuestsItem>
              <StSearchGuestsTextWrapper>
                <StSearchGuestsType>유아</StSearchGuestsType>
                <StSearchGuestsTypeAge>2세 미만</StSearchGuestsTypeAge>
              </StSearchGuestsTextWrapper>
              <StSearchGuestsCountWrapper>
                <StSearchGuestsCountBtn
                  btnType="circle"
                  minusBtn
                  guestCount={infant}
                  onClick={() => decreaseGuestCount(guests, 'infant')}
                >
                  <FiMinus></FiMinus>
                </StSearchGuestsCountBtn>
                <StSearchGuestsCount>{infant}</StSearchGuestsCount>
                <StSearchGuestsCountBtn
                  btnType="circle"
                  onClick={() =>
                    increaseGuestCount(searchData.guests, 'infant')
                  }
                >
                  <FiPlus></FiPlus>
                </StSearchGuestsCountBtn>
              </StSearchGuestsCountWrapper>
            </StSearchGuestsItem>
          </StSearchGuestsList>
        </StSearchGuestsPopup>
      </StSearchGuestsPopupWrapper>
    );
  },
)

SingleApp = ({ app, all, onVersionChange = false, large = false, showTime = false, pack = false, displaySelect = true, preventGlobalSelect, hideBorder=false, preSelected=false}) => {
  const [selected, setSelected] = useState(false);
  const { selectedApps, setSelectedApps } = useContext(SelectedContext);

  const [version, setVersion] = useState(app.latestVersion);

  if (!app.selectedVersion) app.selectedVersion = version;

  if (app.versions.length > 1) {
    app.versions = app.versions.sort((a, b) =>
      compareVersion(b.version, a.version)
    );
    // make sure latest version is sorted
    app.latestVersion = app.versions[0].version;
  }

  useEffect(() => {
    if(preSelected){
      setSelected(true);
      return;
    }

    let found = selectedApps.find((a) => a._id === app._id);

    if (!found){
      if(selected){
        setSelected(false);
      }
      
      return;
    };

    if (found.selectedVersion !== app.latestVersion) {
      setVersion(found.selectedVersion);
    }

    setSelected(true);    
  }, [selectedApps, app._id]);

  let handleAppSelect = () => {
    if (preventGlobalSelect) {
      preventGlobalSelect(app, !selected);
      setSelected(!selected);
      return;
    }

    let found = selectedApps.findIndex((a) => a._id === app._id);
    
    if (found !== -1) {
      let updatedSelectedApps = selectedApps.filter(
        (a, index) => index !== found
      );

      setSelectedApps(updatedSelectedApps);
      setSelected(false);
      
    } else if(app){
      setSelected(true);

      if (all) {
        app = all.find((i) => app._id == i._id);
        setSelectedApps([...selectedApps, app]);
      } else {
        setSelectedApps([...selectedApps, app]);
      }
    }

  };


  if (!app && !app.img || !app.name) return <></>;

  let VersionSelector = () => {
    return (
      <div className={styles.versions}>
        <select
          className={styles.versionSelector}
          value={version}
          onClick={(e) => e.stopPropagation()}
          id="v-selector"
          name="Select app version"
          onChange={(e) => {
            setVersion(e.target.value);
            app.selectedVersion = e.target.value;

            if (selected) {
              let found = selectedApps.find((a) => a._id === app._id);
              found.selectedVersion = e.target.value;

              if(onVersionChange) onVersionChange();
            }
          }}
        >
          {app.versions.map((v) => {
            return (
              <option key={v.version} value={v.version}>
                v{v.version}
              </option>
            );
          })}
        </select>
        <FiChevronDown/>
        {app.versions.length > 1 && (
          <span>
            <label htmlFor="v-selector">
              ({app.versions.length - 1} other{" "}
              {app.versions.length - 1 > 1 ? "versions" : "version"} available)
            </label>
          </span>
        )}
      </div>
    );
  };

  const handleShare = () => {
    const link = `https://twitter.com/intent/tweet?text=${encodeURIComponent(`Checkout ${app.name} by ${app.publisher} on @winstallHQ:`)}&url=${encodeURIComponent(`https://winstall.app/apps/${app._id}`)}`

    window.open(link)
  }

  return (
    <li
      key={app._id}
      // onClick={handleAppSelect}
      className={`${hideBorder ? styles.noBorder: "" }${large ? styles.large : ""} ${pack ? styles.pack : ""} ${styles.single} ${
        selected ? styles.selected : ""
      }`}
    >
      <div className={styles.info}>
        <h3>
          {large ? (
            <>
              <AppIcon id={app._id} name={app.name} icon={app.icon} />
              {app.name}
            </>
          ) : (
            <Link href="/apps/[id]" as={`/apps/${app._id}`} prefetch={false}>
              <a>
                <AppIcon id={app._id} name={app.name} icon={app.icon} />
                <p>{app.name}</p>
              </a>
            </Link>
          )}

          {displaySelect &&  (
            <button
              className={styles.selectApp}
              onClick={handleAppSelect}
              aria-label={selected ? "Unselect app" : "Select app"}
            >
              <FiPlus />
            </button>
          )}
        </h3>

        {!pack && <Description desc={app.desc} id={app._id} full={large} />}
      </div>

      {large && <Copy id={app._id} version={version} latestVersion={app.latestVersion} />}
      <ul className={styles.metaData}>
        {!large && (
          <li>
            <Link href="/apps/[id]" as={`/apps/${app._id}`} prefetch={false}>
              <a>
                <FiInfo />
                View App
              </a>
            </Link>
          </li>
        )}

        {(showTime || large) && (
          <li>
            <FiClock />
            <span>Last updated {timeAgo(app.updatedAt)}</span>
          </li>
        )}

        {!pack && (
          <li className={app.versions.length > 1 ? styles.hover : ""}>
            <FiPackage />
            {app.versions.length > 1 ? (
              <VersionSelector />
            ) : (
              <span>v{app.selectedVersion}</span>
            )}
          </li>
        )}

        <li>
          <Link href={`/apps?q=${`publisher: ${app.publisher}`}`}>
            <a>
              <FiCode />
              Other apps by {app.publisher}
            </a>
          </Link>
        </li>

        {app.homepage && large && (
          <li>
            <a
              href={`${app.homepage}?ref=winstall`}
              target="_blank"
              rel="noopener noreferrer"
              onClick={(e) => e.stopPropagation()}
            >
              <FiExternalLink />
              View Site
            </a>
          </li>
        )}

        {!pack && (
          <li>
            <a
              href={`${
                app.versions.find((i) => i.version === app.selectedVersion)
                  .installers[0]
              }`}
              onClick={(e) => e.stopPropagation()}
            >
              <FiDownload />
              Download{" "}
              {app.versions[0].installerType
                ? `(.${app.versions[0].installerType.toLowerCase()})`
                : ""}
            </a>
          </li>
        )}

        {large && <ExtraMetadata app={app} />}
      </ul>

      {large && app.tags && app.tags.length > 1 && <Tags tags={app.tags} />}

      {large && (
        <div className={styles.largeAppButtons}>
          <button className={styles.selectApp} onClick={handleAppSelect}>
            <FiPlus />
            {selected ? "Unselect" : "Select"} app
          </button>
          <button className={`button ${styles.shareApp}`} onClick={handleShare}>
            <FiShare2 />
            Share
          </button>
        </div>
      )}
    </li>
  );
}

export default function Packs({ packs, error }) {
    if(error) return <Error title="Oops!" subtitle={error}/>
    
    const [offset, setOffset] = useState(0);

    const itemsPerPage = 60;
    const totalPages = Math.ceil(packs.length / itemsPerPage);

    let handleNext = () => {
        window.scrollTo(0, 0)
        setOffset(offset => offset + itemsPerPage);
    }
  
    let handlePrevious = () => {
        window.scrollTo(0, 0)
        setOffset(offset => offset - itemsPerPage);
    }

    const Pagination = ({ small, disable }) => {
        return (
          <div className={small ? styles.minPagination : styles.pagbtn}>
            <button
              className={`button ${small ? styles.smallBtn : null}`}
              id={!small ? "previous": ""}
              onClick={handlePrevious}
              title="Previous page of packs"
              disabled={offset > 0 ? (disable ? "disabled" : null) : "disabled"}
            >
              <FiChevronLeft />
              {!small ? "Previous" : ""}
            </button>
            <button
              className={`button ${small ? styles.smallBtn : null}`}
              id={!small ? "next" : ""}
              title="Next page of packs"
              onClick={handleNext}
              disabled={offset + itemsPerPage < packs.length ? ( disable ? "disabled" : null ) : "disabled"}
            >
              {!small ? "Next" : ""}
              <FiChevronRight />
            </button>
          </div>
        );
    }

      
    return (
        <PageWrapper>
            <MetaTags title="Packs - winstall" desc="Checkout the community's app collections for your new Windows 10 machine." />

            <div>
                <FeaturePromoter art="/assets/packsPromo.svg" promoId="packs" disableHide={true}>
                    <h3>Introducing Packs</h3>
                    <h1>Curate and share the apps you use daily.</h1>
                    <div className="box2">
                        <Link href="/packs/create"><button className="button spacer accent" id="starWine"><FiPlus/> Create a pack</button></Link>
                    </div>
                </FeaturePromoter>

                <div className={styles.controls}> 
                    <div>
                        <h1>All packs {`(${packs.length})`}</h1>
                        <p>
                            Showing {packs.slice(offset, offset + itemsPerPage).length} packs
                            (page {Math.round((offset + itemsPerPage - 1) / itemsPerPage)} of{" "}
                            {totalPages}).
                        </p>
                    </div>
                    <Pagination small/> 
                </div>

        
                
                <ul className={`${styles.all} ${styles.storeList}`}>
                    {packs.slice(offset, offset + itemsPerPage).map(pack => <li key={pack._id}><PackPreview pack={pack} /></li>)}
                </ul>

                <div className={styles.pagination}>
                    <Pagination/>
                    <em>
                        Hit the <FiArrowLeftCircle /> and <FiArrowRightCircle /> keys
                        on your keyboard to navigate between pages quickly.
                    </em>
                </div>
            </div>

        </PageWrapper>
    )
}

render() {
    return (
      <div>
        <Modal show={this.state.showModal} onHide={this.handleClose} centered>
          <div className="modalbody">
            <Modal.Body>
              <TopicForm
                projectID={this.state.projectID}
                handleTopicSubmission={this.handleTopicSubmission}
              />
            </Modal.Body>
          </div>
        </Modal>
        <DragDropContext onDragEnd={this.onDragEnd}>
          <div className="projectCards">
            {this.state.categoriesArray.map((categoryID) => {
              const category = this.state.categories[categoryID._id];
              return (
                <Card
                  className="projectCard"
                  bg="light"
                  style={{ width: "21rem" }}
                  key={category._id}
                >
                  <Card.Header color="#366FF0" className="projectcardheader">
                    {category.categoryName}
                  </Card.Header>
                  <Droppable droppableId={category._id}>
                    {(provided) => (
                      <div
                        className="cardcontent"
                        ref={provided.innerRef}
                        {...provided.droppableProps}
                      >
                        {category.topicIds.map((topicid, index) => {
                          const topic = this.state.Topics[topicid];
                          if (topic) {
                            return (
                              <Draggable draggableId={topic._id} index={index}>
                                {(provided) => (
                                  <Card
                                    onClick={() =>
                                      this.props.handleDiscussionTrue(topic)
                                    }
                                    key={topic._id}
                                    className="topicscard"
                                    {...provided.draggableProps}
                                    {...provided.dragHandleProps}
                                    ref={provided.innerRef}
                                  >
                                    <Card.Title className="topicsheading">
                                      {topic.topicName}
                                    </Card.Title>
                                    <Card.Text className="topicdescription">
                                      {topic.topicDescription}
                                    </Card.Text>
                                    <div>
                                      {topic.topicTags ? (
                                        topic.topicTags.map((k) => {
                                          return (
                                            <Badge
                                              variant="primary"
                                              className="tags"
                                            >
                                              {k}
                                            </Badge>
                                          );
                                        })
                                      ) : (
                                        <Badge variant="primary"></Badge>
                                      )}
                                    </div>
                                  </Card>
                                )}
                              </Draggable>
                            );
                          }
                        })}
                        {provided.placeholder}
                      </div>
                    )}
                  </Droppable>
                  <div
                    className="addnewcard"
                    onClick={() => this.handleShow(category._id)}
                  >
                    <IconContext.Provider
                      value={{
                        style: { verticalAlign: "middle" },
                        className: "reacticon",
                      }}
                    >
                      <FiPlus />
                    </IconContext.Provider>{" "}
                    Add another discussion
                  </div>
                </Card>
              );
            })}
          </div>
        </DragDropContext>
      </div>
    );
  }

MyServices = ({
	initialServices,
	currentSort,
	currentPage,
	initialTotalPages,
	initialTotalItems,
	itemsPerPage,
	sortOptions,
}) => {
	const { t } = useTranslation(['helper', 'account']);
	const router = useRouter();
	const { openModal } = useModal();

	const {
		data: { services = [], totalPages, totalItems },
		isValidating: isValidatingServices,
		revalidate,
		mutate,
	} = useSWR(
		['getUserServices', router.query],
		() => getUserServices({ ...router.query, perPage: itemsPerPage }),
		{
			initialData: {
				services: initialServices,
				totalPages: initialTotalPages,
				totalItems: initialTotalItems,
			},
			revalidateOnFocus: false,
		},
	);

	const {
		data: keywordsOptions = [],
		isValidating: isValidatingKeywords,
		revalidate: revalidateKeywords,
	} = useSWR('getKeywords', () => getTerms({ taxonomy: 'KEYWORDS', embed: 'false' }), {
		revalidateOnFocus: false,
	});

	/**
	 * Pushes new page number to next/router
	 *
	 * @param {string} page Page number.
	 */
	const handlePagination = (page) => {
		const { pathname, query } = router;
		query.page = page;

		router.push({
			pathname,
			query,
		});
	};

	/**
	 * Pushes new sort options to next/router
	 *
	 * @param {string} orderBy Grid column to sort items.
	 * @param {('ASC'|'DESC')} order Sort order.
	 * @returns {Promise<boolean>} Next router push
	 */
	const handleSortBy = (orderBy, order = currentSort.order || orderEnum.ASC) => {
		const { pathname, query } = router;

		const shouldOrderAsc = order === orderEnum.DESC && currentSort.orderBy !== orderBy;
		query.order = shouldOrderAsc ? orderEnum.ASC : order;
		query.orderBy = orderBy;
		query.page = 1;

		return router.push({
			pathname,
			query,
		});
	};

	const handleActive = async (id) => {
		const updatedServices = services.map((service) => {
			if (service.id === id) {
				return { ...service, active: !service.active };
			}

			return service;
		});

		mutate({ services: updatedServices, totalPages, totalItems }, false);
		await updateServiceActiveStatus(id);
		revalidate();
	};

	return (
		<Container>
			<Protected>
				<UserProfile />
				<MainContentContainer>
					<TitleWrapper>
						<Title align="left" noPadding noMargin>
							{t('account:titles.myServices')}
						</Title>
						{(!!isValidatingServices || !!isValidatingKeywords) && (
							<Spinner noPadding />
						)}
					</TitleWrapper>

					{services.length ? (
						<MainContent>
							<InfoContainer>
								<Link href={internalPages.newService}>
									<AddButton>
										<span>{t('account:labels.addServices')}</span>
										<FiPlus />
									</AddButton>
								</Link>
								<Stats>
									{t('account:labels.registeredServices', {
										count: services.length,
									})}
								</Stats>
							</InfoContainer>
							<DataGrid
								data={services.map(
									({
										id,
										name,
										thumbnail,
										keywords,
										description,
										measure_unit,
										price,
										type,
										active,
									}) => ({
										id,
										Título: name,
										Tipo: getTypeLabel(type),
										Ativo: (
											<Actions>
												<SwitchField
													value={!!active}
													checked={!!active}
													name={`active-${id}`}
													onChange={() => handleActive(id)}
												/>
											</Actions>
										),
										Ações: (
											<Actions>
												<IconButton
													variant="info"
													aria-label="Edit Service"
													onClick={() =>
														openModal(
															'editService',
															{
																id,
																name,
																thumbnail,
																keywords: keywords.map(
																	(item) => item.id,
																),
																description,
																measure_unit,
																price: formatMoney(price),
																type,
																revalidateServices: revalidate,
																revalidateKeywords,
																// We need this dirty fix until SelectField has a pagination option
																// So the actual service keywords appears in edit select
																keywordsOptions: [
																	...keywordsOptions,
																	...(!!keywords.length &&
																		keywords.map((item) => ({
																			id: item.id,
																			term: item.term,
																		}))),
																],
															},
															{
																hideCloseModalIcon: true,
																overlayClick: false,
															},
														)
													}
												>
													<FiEdit />
												</IconButton>
											</Actions>
										),
									}),
								)}
								handlePagination={handlePagination}
								handleSortBy={handleSortBy}
								currentPage={currentPage}
								currentOrder={currentSort.order}
								totalPages={totalPages}
								totalItems={totalItems}
								itemsPerPage={itemsPerPage}
								sortOptions={sortOptions}
							/>
						</MainContent>
					) : (
						<EmptyScreen message={t('account:messages.noServicesToShow')} />
					)}
				</MainContentContainer>
			</Protected>
		</Container>
	);
}

MyTechnologies = ({ initialTechnologies, user }) => {
	const { t } = useTranslation(['helper', 'account']);

	const { data: technologies = [], revalidate, mutate } = useSWR(
		['getUserTechnologies', user.id],
		(_, id) => getUserTechnologies(id),
		{
			initialData: initialTechnologies,
		},
	);

	const handleActive = async (id) => {
		const updatedTechnologies = technologies.map((technology) => {
			if (technology.id === id) {
				return { ...technology, active: !technology.active };
			}

			return technology;
		});

		mutate(updatedTechnologies, false);
		await updateTechnologyActiveStatus(id);
		revalidate();
	};

	const handleEditClick = useCallback(
		(id) => window.open(internalPages.editTechnology.replace(':id', id), '_ blank'),
		[],
	);

	return (
		<Container>
			<Protected>
				<UserProfile />
				<MainContentContainer>
					<Title align="left" noPadding noMargin>
						{t('account:titles.myTechnologies')}
					</Title>

					{technologies.length > 0 ? (
						<MainContent>
							<InfoContainer>
								<Link href={internalPages.newTechnology}>
									<AddButton>
										<span>{t('account:labels.addTechnologies')}</span>
										<FiPlus />
									</AddButton>
								</Link>
								<Stats>
									{t('account:labels.registeredTechnologies', {
										count: technologies.length,
									})}
								</Stats>
							</InfoContainer>
							<DataGrid
								data={technologies.map(
									({ id, title, status, installation_time, active }) => ({
										id,
										Título: title,
										Status: (
											<TechnologyStatus status={status}>
												{getTechnologyStatus(status)}
											</TechnologyStatus>
										),
										'Tempo de implantação': getPeriod(t, installation_time),
										Ativa: (
											<Actions>
												<SwitchField
													value={!!active}
													checked={!!active}
													name={`active-${id}`}
													onClick={() => handleActive(id)}
												/>
											</Actions>
										),
										Ações: (
											<Actions>
												<IconButton
													variant="info"
													aria-label="Edit Technology"
													onClick={() => handleEditClick(id)}
												>
													<FiEdit />
												</IconButton>
											</Actions>
										),
									}),
								)}
							/>
						</MainContent>
					) : (
						<EmptyScreen message={t('account:messages.noTechnologyToShow')} />
					)}
				</MainContentContainer>
			</Protected>
		</Container>
	);
}