react-bootstrap#Badge TypeScript Examples

The following examples show how to use react-bootstrap#Badge. 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: common.tsx    From remote-office-hours-queue with Apache License 2.0 6 votes vote down vote up 
export function QueueTable (props: QueueTableProps) {
    const linkBase = props.manageLink ? '/manage/' : '/queue/'

    const sortedQueues = sortQueues(props.queues.slice());
    const queueItems = sortedQueues.map(q => (
        <tr key={q.id}>
            <td aria-label={`Queue ID Number`}>
                <Link to={`${linkBase}${q.id}`}>
                    <Badge variant='primary' pill={true}>{q.id}</Badge>
                </Link>
            </td>
            <td aria-label={`Name for Queue ID ${q.id}`}>
                <Link to={`${linkBase}${q.id}`}>{q.name}</Link>
            </td>
            <td aria-label={`Status for Queue ID ${q.id}`}>
                <Link to={`${linkBase}${q.id}`}>
                    <Badge variant={q.status === 'open' ? 'success' : 'danger'} pill={true}>
                        {q.status}
                    </Badge>
                </Link>
            </td>
        </tr>
    ));
    return (
        <Table bordered hover aria-label='Queue Table with Links' className='queue-table'>
            <thead>
                <tr>
                    <th aria-label='Queue ID Number'>Queue ID</th>
                    <th aria-label='Queue Name'>Name</th>
                    <th aria-label='Queue Status'>Status</th>
                </tr>
            </thead>
            <tbody>{queueItems}</tbody>
        </Table>
    );
}
Example #2
Source File: meetingTables.tsx    From remote-office-hours-queue with Apache License 2.0 6 votes vote down vote up 
MeetingDetails = (props: MeetingDetailsProps) => {
    return (
        <Row>
            <Col md={6} className='mb-1'>
                <Badge variant='secondary' aria-label='Meeting Type'>{props.readableMeetingType}</Badge>
            </Col>
            <Col md={6}>
                <Button
                    variant='link'
                    size='sm'
                    onClick={() => props.onShowMeetingInfo(props.meeting)}
                    disabled={props.disabled}
                >
                    Join Info
                </Button>
            </Col>
        </Row>
    );
}
Example #3
Source File: QuestPage.tsx    From apps with MIT License 5 votes vote down vote up 
QuestSubData = ({ region, quest }: { region: Region; quest: Quest.QuestPhase }) => {
    return (
        <DataTable
            data={{
                "QP Reward": quest.qp.toLocaleString(),
                EXP: quest.exp.toLocaleString(),
                Bond: quest.bond.toLocaleString(),
                Flags: (
                    <>
                        {quest.flags.length > 0
                            ? quest.flags.map((flag) => (
                                  <Link to={`/${region}/quests?flag=${flag}`} key={flag}>
                                      <Badge style={{ marginRight: 5, background: "green", color: "white" }}>
                                          {QuestFlagDescription.get(flag) ?? toTitleCase(flag)}
                                      </Badge>
                                  </Link>
                              ))
                            : "This quest has no flag"}
                    </>
                ),
                "Unlock Condition": (
                    <>
                        {quest.releaseConditions.map((cond) => (
                            <div key={`${cond.type}-${cond.targetId}-${cond.value}`}>
                                {cond.closedMessage !== "" ? `${cond.closedMessage} — ` : ""}
                                <CondTargetValueDescriptor
                                    region={region}
                                    cond={cond.type}
                                    target={cond.targetId}
                                    value={cond.value}
                                />
                            </div>
                        ))}
                    </>
                ),
                Individuality: mergeElements(
                    quest.individuality.map((trait) => (
                        <TraitDescription
                            region={region}
                            trait={trait}
                            owner="quests"
                            ownerParameter="fieldIndividuality"
                        />
                    )),
                    ", "
                ),
                "Enemy Classes": mergeElements(
                    quest.className.map((className) => <ClassIcon className={className} />),
                    " "
                ),
                "Recommended Level": quest.recommendLv,
                "Battle BG ID": <Link to={`/${region}/quests?battleBgId=${quest.battleBgId}`}>{quest.battleBgId}</Link>,
                Raw: (
                    <Row>
                        <Col>
                            <RawDataViewer key={`${region}-${quest.id}-${quest.phase}`} text="Nice" data={quest} />
                        </Col>
                        <Col>
                            <RawDataViewer
                                key={`${region}-${quest.id}-${quest.phase}`}
                                text="Raw"
                                data={`${Host}/raw/${region}/quest/${quest.id}/${quest.phase}`}
                            />
                        </Col>
                    </Row>
                ),
            }}
        />
    );
}
Example #4
Source File: IssueRequests.tsx    From polkabtc-ui with Apache License 2.0 4 votes vote down vote up 
function IssueRequests(): JSX.Element {
  const { address, extensions } = useSelector((state: StoreType) => state.general);
  const issueRequests = useSelector((state: StoreType) => state.issue.issueRequests).get(address) || [];
  const [issueModalOpen, setIssueModalOpen] = useState(false);
  const dispatch = useDispatch();
  const { t } = useTranslation();

  const handleIssueModalClose = () => {
    setIssueModalOpen(false);
  };

  const openWizard = () => {
    if (extensions.length && address) {
      setIssueModalOpen(true);
    } else {
      dispatch(showAccountModalAction(true));
    }
  };

  const handleCompleted = (status: IssueRequestStatus) => {
    switch (status) {
    case IssueRequestStatus.RequestedRefund:
    case IssueRequestStatus.Completed: {
      return <FaCheck className='inline-block' />;
    }
    case IssueRequestStatus.Cancelled:
    case IssueRequestStatus.Expired: {
      return (
        <Badge
          className='badge-style'
          variant='secondary'>
          {t('cancelled')}
        </Badge>
      );
    }
    default: {
      return <FaHourglass className='inline-block' />;
    }
    }
  };

  const requestClicked = (request: IssueRequest): void => {
    dispatch(changeIssueIdAction(request.id));
    openWizard();
  };

  return (
    <div
      className={clsx(
        'container',
        'mt-12',
        'mx-auto',
        'text-center'
      )}>
      {issueRequests?.length > 0 && (
        <>
          <h5
            className={clsx(
              'font-bold',
              'text-xl',
              'mb-2'
            )}>
            {t('issue_requests')}
          </h5>
          <p className='mb-4'>
            {t('issue_page.click_on_issue_request')}
          </p>
          <Table
            hover
            responsive
            size='md'>
            <thead>
              <tr>
                <th>{t('issue_page.updated')}</th>
                <th>{t('issue_page.amount')}</th>
                <th>{t('issue_page.btc_transaction')}</th>
                <th>{t('issue_page.confirmations')}</th>
                <th>{t('status')}</th>
              </tr>
            </thead>
            <tbody>
              {issueRequests.map((request: IssueRequest, index: number) => {
                return (
                  <tr
                    key={index}
                    onClick={() => requestClicked(request)}
                    className='table-row-opens-modal'>
                    <td>
                      {request.timestamp ?
                        formatDateTimePrecise(new Date(Number(request.timestamp))) :
                        t('pending')}
                    </td>
                    <td>
                      {request.issuedAmountBtc || request.requestedAmountPolkaBTC}{' '}
                      <span className='grey-text'>PolkaBTC</span>
                    </td>
                    <td>
                      <BitcoinTransaction
                        txId={request.btcTxId}
                        shorten />
                    </td>
                    <td>
                      {request.btcTxId === '' ?
                        t('not_applicable') :
                        Math.max(request.confirmations, 0)}
                    </td>
                    <td>{handleCompleted(request.status)}</td>
                  </tr>
                );
              })}
            </tbody>
          </Table>
          <IssueModal
            open={issueModalOpen}
            onClose={handleIssueModalClose} />
        </>
      )}
    </div>
  );
}
Example #5
Source File: AdminDashBoard.tsx    From Apni-Dukan-Frontend with MIT License 4 votes vote down vote up 
function AdminDashBoard() {
  const { name, email } = isAuthenticated() as JWT;

  const adminLeftSide = () => {
    return (
      <div className="bg-info rounded shadow p-2">
        <h2 className="card bg-warning text-dark p-3">Admin Navigation</h2>
        <div className="text-left p-2">
          <div>
            <Badge variant="warning">Name :</Badge>
            &nbsp;
            <span className="text-light">{name}</span>
          </div>
          <div>
            <Badge variant="warning">Email :</Badge>
            &nbsp;
            <span className="text-light">{email}</span>
          </div>
          <div>
            <Badge variant="warning">Role :</Badge>
            &nbsp;
            <span className="text-light">Admin</span>
          </div>
        </div>
        <div className="p-3">
          <Link
            style={{ textDecoration: "none", color: "black" }}
            to="/admin/create/category"
          >
            <Button block variant="outline-light">
              Create Category
            </Button>
          </Link>

          <br />

          <Link
            style={{ textDecoration: "none", color: "black" }}
            to="/admin/create/product"
          >
            <Button block variant="outline-light">
              Create Product
            </Button>
          </Link>
          <br />

          <Link
            style={{ textDecoration: "none", color: "black" }}
            to="/admin/categories"
          >
            <Button block variant="outline-light">
              Manage Category
            </Button>
          </Link>
          <br />
          <Link
            style={{ textDecoration: "none", color: "black" }}
            to="/admin/products"
          >
            <Button block variant="outline-light">
              Manage Products
            </Button>
          </Link>
          <br />

          <Link
            style={{ textDecoration: "none", color: "black" }}
            to="/admin/orders"
          >
            <Button block variant="outline-light">
              Manage Orders
            </Button>
          </Link>
        </div>
      </div>
    );
  };

  return (
    <Base
      title="Welcome to Admin Dashboard"
      description="Manage all your products and categories here!"
    >
      <div className="row">
        <div className="col-8 offset-2">{adminLeftSide()}</div>
      </div>
    </Base>
  );
}