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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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>
<span className="text-light">{name}</span>
</div>
<div>
<Badge variant="warning">Email :</Badge>
<span className="text-light">{email}</span>
</div>
<div>
<Badge variant="warning">Role :</Badge>
<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>
);
}
