@fortawesome/free-solid-svg-icons#faAngleRight TypeScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faAngleRight.
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: PaginationButtons.tsx From advocacy-maps with MIT License | 6 votes |
|
PaginationButtons = ({
pagination: {
currentPage,
nextPage,
hasNextPage,
previousPage,
hasPreviousPage
}
}: {
pagination: Pagination
}) => (
<div className="d-flex justify-content-center mb-3">
<Button
variant="primary"
style={{ marginRight: 15 }}
onClick={previousPage}
disabled={!hasPreviousPage}
>
<FontAwesomeIcon icon={faAngleLeft} />
</Button>
<span>Page {currentPage}</span>
<Button
variant="primary"
style={{ marginLeft: 15 }}
onClick={nextPage}
disabled={!hasNextPage}
>
<FontAwesomeIcon icon={faAngleRight} />
</Button>
</div>
)
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: DSBlockDetailsPage.tsx From devex with GNU General Public License v3.0 | 4 votes |
|
DSBlockDetailsPage: React.FC = () => {
const { blockNum } = useParams()
const networkContext = useContext(NetworkContext)
const { dataService } = networkContext!
const [isLoading, setIsLoading] = useState(false)
const [error, setError] = useState<string | null>(null)
const [data, setData] = useState<DsBlockObj | null>(null)
const [latestDSBlockNum, setLatestDSBlockNum] = useState<number | null>(null)
const [minerInfo, setMinerInfo] = useState<MinerInfo | null>(null)
const [currShardIdx, setCurrShardIdx] = useState<number>(0)
const [showMore, setShowMore] = useState<boolean>(false)
// Fetch data
useEffect(() => {
setIsLoading(true)
if (!dataService) return
let latestDSBlockNum: number
let receivedData: DsBlockObj
let minerInfo: MinerInfo
const getData = async () => {
try {
if (isNaN(blockNum))
throw new Error('Not a valid block number')
receivedData = await dataService.getDSBlockDetails(blockNum)
latestDSBlockNum = await dataService.getNumDSBlocks()
try { // wrapped in another try catch because it is optional
minerInfo = await dataService.getMinerInfo(blockNum)
} catch (e) { console.log(e) }
if (receivedData)
setData(receivedData)
if (latestDSBlockNum)
setLatestDSBlockNum(latestDSBlockNum)
if (minerInfo)
setMinerInfo(minerInfo)
} catch (e) {
console.log(e)
setError(e)
} finally {
setIsLoading(false)
}
}
getData()
return () => {
setData(null)
setLatestDSBlockNum(null)
setMinerInfo(null)
setError(null)
setCurrShardIdx(0)
setShowMore(false)
}
}, [blockNum, dataService])
return <>
{isLoading ? <div className='center-spinner'><Spinner animation="border" /></div> : null}
{error
? <NotFoundPage />
: data && (
<>
<div className='dsblock-header'>
<h3 className='mb-1'>
<span className='mr-1'>
<FontAwesomeIcon className='fa-icon' icon={faCubes} />
</span>
<span className='ml-2'>
DS Block
</span>
{' '}
<span className='subtext'>#{data.header.BlockNum}</span>
<LabelStar type='DS Block' />
</h3>
<span>
<QueryPreservingLink
className={parseInt(data.header.BlockNum) === 0
? 'disabled mr-3' : 'mr-3'}
to={`/dsbk/${parseInt(data.header.BlockNum) - 1}`}>
<FontAwesomeIcon size='2x' className='fa-icon' icon={faCaretSquareLeft} />
</QueryPreservingLink>
<QueryPreservingLink
className={latestDSBlockNum && parseInt(data.header.BlockNum) === latestDSBlockNum - 1 ? 'disabled' : ''}
to={`/dsbk/${parseInt(data.header.BlockNum) + 1}`}>
<FontAwesomeIcon size='2x' className='fa-icon' icon={faCaretSquareRight} />
</QueryPreservingLink>
</span>
</div>
<Card className='dsblock-details-card'>
<Card.Body>
<Container>
<Row>
<Col>
<div className='dsblock-detail'>
<span>Date:</span>
<span>
{timestampToDisplay(data.header.Timestamp)}
{' '}
({timestampToTimeago(data.header.Timestamp)})
</span>
</div>
</Col>
<Col>
<div className='dsblock-detail'>
<span>Difficulty:</span>
<span>{data.header.Difficulty}</span>
</div>
</Col>
</Row>
<Row>
<Col>
<div className='dsblock-detail'>
<span>DS Difficulty:</span>
<span>{data.header.DifficultyDS}</span>
</div>
</Col>
<Col>
<div className='dsblock-detail'>
<span>Gas Price:</span>
<span>{qaToZil(data.header.GasPrice)}</span>
</div>
</Col>
</Row>
<Row>
<Col>
<div className='dsblock-detail'>
<span>DS Leader:</span>
<span>
<QueryPreservingLink to={`/address/${pubKeyToZilAddr(data.header.LeaderPubKey)}`}>
{pubKeyToZilAddr(data.header.LeaderPubKey)}
</QueryPreservingLink>
</span>
</div>
</Col>
</Row>
<Row>
<Col>
<div className='dsblock-detail'>
<span>Signature:</span>
<span className='dsblock-signature'>{data.signature}</span>
</div>
</Col>
</Row>
</Container>
</Card.Body>
</Card>
{data.header.PoWWinners.length > 0 && (
<Card className='dsblock-details-card'>
<Card.Body>
<Container className='mono'>
<h6 className='mb-2'>PoW Winners</h6>
{data.header.PoWWinners.map((x, index) => <div key={index}>[{index}]
{' '}
<QueryPreservingLink to={`/address/${pubKeyToZilAddr(x)}`}>{pubKeyToZilAddr(x)}</QueryPreservingLink></div>)}
</Container>
</Card.Body>
</Card>
)}
{minerInfo &&
<>
<Collapse in={showMore}>
<Row>
<Col>
<Card className='miner-card'>
<Card.Body>
<Container className='mono'>
<Row className='justify-content-between'>
<span>DS Committee</span>
<span>Total: <strong>{minerInfo.dscommittee.length}</strong></span>
</Row>
<Row className='justify-content-center'>
{minerInfo.dscommittee.length > 0
? <MinerTable addresses={minerInfo.dscommittee} />
: <span className='my-3'>No addresses to show</span>
}
</Row>
</Container>
</Card.Body>
</Card>
</Col>
<Col>
<Card className='miner-card ml-auto'>
<Card.Body>
<Container className='mono'>
<Row className='justify-content-between'>
<Col>
<span>Shard {currShardIdx + 1} of {minerInfo.shards.length}</span>
</Col>
<Col className='text-center shard-toggle'>
<span>
<FontAwesomeIcon size='2x'
cursor='pointer'
onClick={currShardIdx === 0 ? undefined : () => (setCurrShardIdx(currShardIdx - 1))}
className={currShardIdx === 0 ? 'disabled' : ''} icon={faAngleLeft} />
<FontAwesomeIcon size='2x'
cursor='pointer'
onClick={currShardIdx === minerInfo.shards.length - 1 ? undefined : () => (setCurrShardIdx(currShardIdx + 1))}
className={currShardIdx === minerInfo.shards.length - 1 ? 'disabled ml-3' : 'ml-3'} icon={faAngleRight} />
</span>
</Col>
<Col className='text-right'>
<span>
Total:
{' '}
<strong>{minerInfo.shards[currShardIdx].nodes.length}</strong>
</span>
</Col>
</Row>
<Row className='justify-content-center'>
{minerInfo.shards[currShardIdx].nodes.length > 0
? <MinerTable addresses={minerInfo.shards[currShardIdx].nodes} />
: <span className='my-3'>No addresses to show</span>
}
</Row>
</Container>
</Card.Body>
</Card>
</Col>
</Row>
</Collapse>
</>
}
<Container className='showmore-container' onClick={() => setShowMore(!showMore)}>
<Row>
<FontAwesomeIcon icon={showMore ? faAngleUp : faAngleDown} size='2x' className='fa-icon' />
</Row>
</Container>
</>
)}
</>
}
