react-icons/fi#FiPlayCircle TypeScript Examples

The following examples show how to use react-icons/fi#FiPlayCircle. 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: musicCard.tsx    From cloudmusic-vscode with MIT License 5 votes vote down vote up 
MusicCard = ({
  name,
  id,
  alia,
  ar,
  al,
  playCount,
  max,
}: MusicCardProps): JSX.Element => (
  <div className="relative box-border h-24 w-full my-4 rounded-xl bg-black bg-opacity-20 shadow-md flex flex-row px-4 justify-between items-center overflow-hidden">
    <div
      className="absolute h-full bg-blue-600 left-0 top-0 -z-10"
      style={{ width: `${Math.ceil(playCount / max)}%` }}
    />
    <img
      className="cursor-pointer rounded-full h-20 w-20"
      src={al.picUrl}
      alt={al.name}
      onClick={() => {
        const data: Omit<MsicRankingCMsg, "channel"> = {
          msg: { command: "album", id: al.id },
        };
        vscode.postMessage(data);
      }}
    />
    <div className="cursor-pointer flex-1 ml-4">
      <div
        className="font-medium text-xl"
        onClick={() => {
          const data: Omit<MsicRankingCMsg, "channel"> = {
            msg: { command: "song", id },
          };
          vscode.postMessage(data);
        }}
      >{`${name}${alia[0] ? ` (${alia.join("/")})` : ""}`}</div>
      <div>
        {ar.map(({ name, id }, idx) => (
          <div
            key={id}
            className="text-base inline-block"
            onClick={() =>
              vscode.postMessage({
                msg: { command: "artist", id },
              } as MsicRankingCMsg)
            }
          >
            {name}
            {idx < ar.length - 1 ? "/" : ""}
          </div>
        ))}
      </div>
    </div>
    <FiPlayCircle size={20} />
    <div className="w-16 font-bold text-2xl ml-2">{playCount}</div>
  </div>
)
Example #2
Source File: index.tsx    From dxvote with GNU Affero General Public License v3.0 4 votes vote down vote up 
Status = () => {
  const {
    context: { daoStore, configStore, providerStore, daoService },
  } = useContext();

  //State
  const networkContracts = configStore.getNetworkContracts();
  // We should get the ID in another way
  const proposalId = useLocation().pathname.split('/')[3];
  const proposal = daoStore.getProposal(proposalId);
  const { account } = providerStore.getActiveWeb3React();
  const scheme = daoStore.getScheme(proposal.scheme);

  const executionTimeoutTime = isWalletScheme(scheme)
    ? proposal.submittedTime.plus(scheme.maxSecondsForExecution)
    : bnum(0);

  const executePendingAction = function (pendingAction) {
    switch (pendingAction) {
      case PendingAction.Redeem:
        daoService.redeemContributionReward(
          networkContracts.daostack[scheme.address].redeemer,
          scheme.address,
          scheme.votingMachine,
          proposalId,
          account
        );
        break;
      case PendingAction.RedeemForBeneficiary:
        daoService.executeMulticall(scheme.address, proposalId);
        break;
      default:
        daoService.execute(proposalId);
        break;
    }
  };

  const votingMachineUsed = daoStore.getVotingMachineOfProposal(proposalId);

  const { status, boostTime, finishTime, pendingAction } =
    daoStore.getProposalStatus(proposalId);

  const autoBoost =
    networkContracts.votingMachines[votingMachineUsed.address].type ==
    'DXDVotingMachine';

  return (
    <>
      <h2 style={{ margin: '10px 0px 0px 0px', textAlign: 'center' }}>
        {status} <Question question="3" />
      </h2>
      <SpaceAroundRow style={{ margin: '0px 10px', flexDirection: 'column' }}>
        {boostTime.toNumber() > moment().unix() && (
          <span className="timeText">
            Boost in <Countdown date={boostTime.toNumber() * 1000} />{' '}
          </span>
        )}
        {finishTime.toNumber() > moment().unix() && (
          <span className="timeText">
            Finish in{' '}
            <Countdown
              autoStart={pendingAction === 1 && !autoBoost ? false : true}
              date={finishTime.toNumber() * 1000}
            />
            {pendingAction === 1 && !autoBoost && ' after boost'}
          </span>
        )}
        {status === 'Pending Execution' && executionTimeoutTime.toNumber() > 0 && (
          <span className="timeText">
            {' '}
            Execution timeout in{' '}
            <Countdown date={executionTimeoutTime.toNumber() * 1000} />{' '}
          </span>
        )}
      </SpaceAroundRow>
      {account && pendingAction > 0 && (
        <SpaceAroundRow
          style={{ flexDirection: 'column', alignItems: 'center' }}
        >
          <ActionButton
            color="blue"
            onClick={() => executePendingAction(pendingAction)}
          >
            <FiPlayCircle /> {PendingAction[pendingAction]}{' '}
          </ActionButton>
        </SpaceAroundRow>
      )}
    </>
  );
}