@fortawesome/free-solid-svg-icons#faCogs TypeScript Examples

The following examples show how to use @fortawesome/free-solid-svg-icons#faCogs. 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: RoomIdHeader.tsx From longwave with MIT License

6 votes

export function RoomIdHeader() {
  const { t } = useTranslation();
  const { roomId }: { [k: string]: any } = useParams();

  return (
    <CenteredRow
      style={{
        justifyContent: "flex-end",
        alignItems: "center",
        color: "gray",
      }}
    >
      <div style={{ margin: 4, padding: 4 }}>
        {t("roomidheader.roomid")} {roomId}
      </div>
      <Tippy content={<RoomMenu />} interactive placement="bottom-end">
        <div tabIndex={0} style={{ padding: 8 }}>
          <FontAwesomeIcon icon={faCogs} />
        </div>
      </Tippy>
    </CenteredRow>
  );
}

Example #2

Source File: icons.font-awesome-solid.ts From dayz-server-manager with MIT License

5 votes

fontAwesomeSolidIcons = {
    faAngleDown,
    faAngleRight,
    faArrowLeft,
    faBars,
    faBookOpen,
    faChartArea,
    faChartBar,
    faChartPie,
    faChevronDown,
    faChevronUp,
    faColumns,
    faSearch,
    faTable,
    faTachometerAlt,
    faUser,
    faExclamationTriangle,
    faSignOutAlt,
    faCalendarAlt,
    faCogs,
    faClipboardList,
    faHammer,
    faTools,
    faSync,
    faLock,
    faLockOpen,
    faTrash,
    faPlusCircle,
    faSpinner,
    faMap,
    faAnchor,
    faCity,
    faChessRook,
    faMountain,
    faCampground,
    faHome,
    faUniversity,
    faCrosshairs,
    faPlane,
    faWrench,
}

Example #3

Source File: steps.tsx From videotranscode.space with Apache License 2.0

4 votes

StepComponent = () => {
  const [current, setCurrent] = useState(0)

  const [statues, setStatues] = useState<Statuses>(defaultStatus)

  const { processed, globalReset, CluiStore, FileStore } = ComponentStore

  const { allFiles } = FileStore

  const { isSubmitted } = CluiStore

  const displayable = useActiveUsers()

  useEffect(() => {
    if (allFiles.length > 0) {
      setStatues(cur => ({ ...cur, file: 'finish' }))
      setCurrent(1)
    }
  }, [allFiles])

  useEffect(() => {
    if (globalReset) {
      setStatues(defaultStatus)
      setCurrent(0)
    }
  }, [globalReset])

  useEffect(() => {
    if (isSubmitted) {
      setStatues(cur => ({ ...cur, settings: 'finish' }))
      setCurrent(2)
    }
  }, [isSubmitted])

  useEffect(() => {
    if (processed) {
      setStatues(cur => ({ ...cur, processing: 'finish', download: 'finish' }))
      setCurrent(3)
    }
  }, [processed])
  if (!displayable) {
    return (
      <div className="step-wrapper">
        <Steps current={current}>
          <Step
            title="Add File"
            icon={<FontAwesomeIcon icon={faFile} />}
            status={statues.file}
            onClick={() => {
              ComponentStore.FileStore.openFileDrawer()
            }}
            className={isSubmitted ? 'cursor-not-allowed' : 'cursor-pointer'}
          />
          <Step
            title="Choose Settings"
            icon={<FontAwesomeIcon icon={faCogs} />}
            status={statues.settings}
            onClick={() => {
              if (keyboardStore.toggleModal) {
                keyboardStore.toggleModal()
              }
            }}
            className={isSubmitted ? 'cursor-not-allowed' : 'cursor-pointer'}
          />
          <Step
            title="Processing"
            icon={<FontAwesomeIcon icon={faClock} />}
            status={statues.processing}
            className="cursor-not-allowed"
          />
          <Step
            title="Download"
            icon={<FontAwesomeIcon icon={faDownload} />}
            status={statues.download}
            className="cursor-not-allowed"
          />
        </Steps>
        {/* @ts-ignore Styled JSX */}
        <style jsx>
          {`
            .step-wrapper {
              color: #3fbd71 !important;
              padding-top: ${isSubmitted ? '15vh' : '2vh'};
              width: 80vw;
            }
          `}
        </style>
      </div>
    )
  } else {
    return null
  }
}