react-icons/fa#FaExternalLinkAlt JavaScript Examples
The following examples show how to use
react-icons/fa#FaExternalLinkAlt.
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: Grafana.js From testnets-cardano-org with MIT License | 6 votes |
|
GrafanaOuter = ({ embedLink }) => (
<Container>
<ExternalLink>
<Link href={embedLink} title='Grafana dashboard'><FaExternalLinkAlt /></Link>
</ExternalLink>
<Theme.Consumer>
{({ theme }) => (
<Grafana embedLink={embedLink} theme={theme.type} />
)}
</Theme.Consumer>
</Container>
)
Example #2
| Source File: Project.js From devfolio with MIT License | 6 votes |
|
Project = ({ description, title, github, stack, url, image }) => {
return (
<article className="project">
{image && (
<Image fluid={image.childImageSharp.fluid} className="project-img" />
)}
<div className="project-info">
<h3>{title}</h3>
<p className="project-desc">{description}</p>
<div className="project-stack">
{stack.map((item) => {
return <span key={item.id}>{item.title}</span>;
})}
</div>
<div className="project-links">
<a
href={github}
rel="noopener noreferrer"
target="_blank"
aria-label="Github Link"
>
<FaGithub className="project-icon" />
</a>
<a
href={url}
rel="noopener noreferrer"
target="_blank"
aria-label="Project Link"
>
<FaExternalLinkAlt className="project-icon" />
</a>
</div>
</div>
</article>
);
}
Example #3
| Source File: InformationCards.js From DAOInsure with MIT License | 4 votes |
|
function InformationCards({
author,
loadingClaim,
dateOfIncident,
ipfsHash,
yesVotes,
noVotes,
rainData,
memberData,
}) {
const voters = [""];
const [openWeatherStats, setOpenWeatherStats] = useState();
useEffect(() => {
async function init() {
let response = await axios.get(
"https://api.openweathermap.org/data/2.5/onecall/timemachine?lat=32.21&lon=76.32&exclude=minutely,hourly&appid=162ac7d2a16586444f5b2e968f020e4c&dt=1628319601"
);
setOpenWeatherStats(response.data.hourly);
}
init();
}, []);
return (
<VStack spacing={5}>
<Card cardTitle='Information'>
<HStack width='100%'>
<Text fontWeight='600'>Author</Text>
<Spacer />
{loadingClaim ? (
<Skeleton isLoaded={!loadingClaim}>Author</Skeleton>
) : (
<Text>{`${author.substr(0, 7)}...${author.substr(
-7
)}`}</Text>
)}
</HStack>
<HStack width='100%'>
<Text fontWeight='600'>IPFS</Text>
<Spacer />
{loadingClaim ? (
<Skeleton isLoaded={!loadingClaim}>IPFS hash</Skeleton>
) : (
<HStack>
<a
href={`https://ipfs.io/ipfs/` + ipfsHash}
target='_blank'>
<Text>
{" "}
{`${ipfsHash.substr(
0,
7
)}...${ipfsHash.substr(-7)}`}{" "}
</Text>
<FaExternalLinkAlt size='10px' />
</a>
</HStack>
)}
</HStack>
<HStack width='100%'>
<Text fontWeight='600'>Member location</Text>
<Spacer />
{loadingClaim ? (
<Skeleton isLoaded={!loadingClaim}>Author</Skeleton>
) : (
<a
target='_blank'
href={
`https://www.google.co.in/maps/@` +
memberData.lat +
`,` +
memberData.long
}>
Map
</a>
)}
</HStack>
</Card>
<Card cardTitle='Time'>
<VStack width='100%'>
<HStack width='100%'>
<Text fontWeight='600'>Date Of Incident</Text>
<Spacer />
{loadingClaim ? (
<Skeleton isLoaded={!loadingClaim}>
Date Of Incident
</Skeleton>
) : (
<HStack>
<Text>{dateOfIncident}</Text>
</HStack>
)}
</HStack>
</VStack>
</Card>
<ChainlinkCard cardTitle=''>
<VStack width='100%'>
<HStack width='100%'>
<Text fontWeight='600'>Rain data : </Text>
<Text fontWeight='600'>{rainData} mm</Text>
<Spacer />
</HStack>
</VStack>
</ChainlinkCard>
<Card cardTitle='Current Results'>
<VStack width='100%'>
<HStack width='100%'>
<Text fontWeight='600'>Yes</Text>
<Spacer />
{loadingClaim ? (
<Skeleton>vote percent</Skeleton>
) : (
<Text fontWeight='600'>
{(yesVotes / (yesVotes + noVotes)) * 100
? (yesVotes / (yesVotes + noVotes)) * 100
: "0"}
%
</Text>
)}
</HStack>
<Progress
width='100%'
borderRadius='20px'
background='gray.300'
height='10px'
value={
loadingClaim
? 0
: (yesVotes / (yesVotes + noVotes)) * 100
}
colorScheme='green'
size='lg'
/>
<HStack width='100%'>
<Text fontWeight='600'>No</Text>
<Spacer />
{loadingClaim ? (
<Skeleton>vote percent</Skeleton>
) : (
<Text fontWeight='600'>
{(noVotes / (yesVotes + noVotes)) * 100
? (noVotes / (yesVotes + noVotes)) * 100
: "0"}
%
</Text>
)}
</HStack>
<Progress
width='100%'
borderRadius='20px'
background='gray.300'
height='10px'
value={
loadingClaim ? 0 : noVotes / (yesVotes + noVotes)
}
colorScheme='green'
size='lg'
/>
</VStack>
</Card>
<Card cardTitle='OpenWeather Analysis'>
{openWeatherStats ? (
<>
{openWeatherStats.map((stat) => {
return (
<HStack width='100%'>
<Text>
{new Date(parseInt(stat.dt) * 1000)
.toTimeString()
.substr(0, 5)}
</Text>
<Text>
{stat.weather[0].description[0].toUpperCase() +
stat.weather[0].description.substr(
1
)}
</Text>
<Spacer />
<Image
src={`http://openweathermap.org/img/wn/${stat.weather[0].icon}.png`}
/>
</HStack>
);
})}
</>
) : (
<Spinner margin='auto' />
)}
</Card>
<Card cardTitle='Votes'>
<VStack width='100%' alignItems='flex-start'>
{loadingClaim ? (
<HStack justifyContent='space-between' width='100%'>
<HStack>
<SkeletonCircle />
<Skeleton>Address that voted</Skeleton>
</HStack>
<Skeleton>Vote</Skeleton>
<Skeleton>Voting Power</Skeleton>
</HStack>
) : (
<>
{voters.map((voter) => {
return (
<HStack
justifyContent='space-between'
width='100%'
key={0}>
<HStack>
<Avatar
size='xs'
icon={
<Jazzicon
diameter='24'
address='0x8Cf24E66d1DC40345B1bf97219856C8140Ce6c69'
/>
}
/>
<Tag>{`${"0x8Cf24E66d1DC40345B1bf97219856C8140Ce6c69".substr(
0,
6
)}...${"0x8Cf24E66d1DC40345B1bf97219856C8140Ce6c69".substr(
-5
)}`}</Tag>
</HStack>
<Tag colorScheme='whatsapp'>Yes</Tag>
<Text>300 DIx</Text>
</HStack>
);
})}
</>
)}
</VStack>
</Card>
</VStack>
);
}
Example #4
| Source File: Article.js From testnets-cardano-org with MIT License | 4 votes |
|
NavigationTree = ({
items,
lang,
path,
ariaLabel,
currentPathname,
id = '',
isRoot = true,
position,
setPosition,
navigationHeights,
setNavigationHeights,
autoScroll = true,
maxWidth,
setMaxWidth,
}) => {
const rootRef = useRef(null)
const [expanded, setExpanded] = useState(getDefaultExpanded())
function isActive(path) {
const resolvedPath = lang ? `/${lang}${path}` : path
if (currentPathname.substring(0, resolvedPath.length) === resolvedPath)
return true
return false
}
function getDefaultExpanded() {
const expanded = {}
const itemsWithChildren = items.filter(
({ children }) => children.length > 0
)
itemsWithChildren.forEach((item) => {
expanded[item.path] = isActive(item.path)
})
return expanded
}
const updateNavigationHeights = useCallback(() => {
const { bottom, top } = rootRef.current.getBoundingClientRect()
const { min, max } = navigationHeights
const newMax = window.innerHeight - FIXED_HEADER_OFFSET - 40
const newMin = Math.min(Math.abs(top - bottom), newMax)
if (min !== newMin || max !== newMax)
setNavigationHeights({ min: newMax, max: newMax })
}, [navigationHeights, rootRef])
const updateMaxWidth = useCallback(() => {
const { left, right } =
rootRef.current.parentElement.parentElement.getBoundingClientRect()
const newMaxWidth = Math.abs(right - left)
if (maxWidth !== newMaxWidth) setMaxWidth(newMaxWidth)
}, [maxWidth, rootRef])
const toggleAccordion = (item) => (e) => {
if (item.hasContent) return
e.preventDefault()
if (isActive(item.path)) return
setExpanded({
...expanded,
[item.path]: !expanded[item.path],
})
}
const onScroll = useCallback(() => {
const { top, bottom } =
rootRef.current.parentElement.parentElement.getBoundingClientRect()
const { bottom: navBottom, top: navTop } =
rootRef.current.getBoundingClientRect()
if (position === 'top' && top <= 0 + FIXED_HEADER_OFFSET) {
setPosition('fixed')
} else if (position !== 'top' && top > 0 + FIXED_HEADER_OFFSET) {
setPosition('top')
} else if (position !== 'bottom' && navBottom >= bottom - 20) {
setPosition('bottom')
} else if (position === 'bottom' && navTop >= 0 + FIXED_HEADER_OFFSET) {
setPosition('fixed')
}
}, [position, rootRef, navigationHeights])
useEffect(() => {
if (isRoot && rootRef.current && autoScroll) {
updateNavigationHeights()
updateMaxWidth()
window.addEventListener('resize', updateNavigationHeights)
window.addEventListener('resize', updateMaxWidth)
window.addEventListener('scroll', onScroll)
window.addEventListener('touchmove', onScroll)
}
return () => {
if (isRoot && rootRef.current && autoScroll) {
window.removeEventListener('resize', updateNavigationHeights)
window.removeEventListener('resize', updateMaxWidth)
window.removeEventListener('scroll', onScroll)
window.removeEventListener('touchmove', onScroll)
}
}
}, [isRoot, rootRef, position, expanded, autoScroll])
return (
<Nav
id={id}
role="navigation"
aria-label={ariaLabel}
key={path}
ref={rootRef}
className={isRoot ? `position-${position}` : ''}
>
{items.map((item) => (
<li key={item.path}>
{item.children.length === 0 && !item.externalHref && (
<Link
href={`${item.path}`}
activeClassName="active"
title={item.title}
partiallyActive
tracking={{ category: 'article_navigation', label: item.path }}
>
{item.title}
</Link>
)}
{item.externalHref && (
<ExternalLink
href={`${item.externalHref}`}
title={item.title}
tracking={{
category: 'article_navigation_external',
label: item.externalHref,
}}
>
<Box display="flex">
<Box
display="flex"
flexDirection="column"
justifyContent="center"
>
{item.title}
</Box>
<Box
display="flex"
flexDirection="column"
justifyContent="center"
marginLeft={1}
>
<FaExternalLinkAlt />
</Box>
</Box>
</ExternalLink>
)}
{item.children.length > 0 && !item.externalHref && (
<Fragment>
<AccordionToggle
href={item.path}
className={item.hasContent ? '' : 'has-no-content'}
onClick={toggleAccordion(item)}
activeClassName="active"
partiallyActive
tracking={{
category: 'article_navigation',
label: `toggle_accordion_${item.path}`,
}}
aria-disabled={isActive(item.path) ? 'true' : 'false'}
aria-controls={item.path}
aria-expanded={expanded[item.path]}
>
<Box display="flex">
<Box
flex={1}
justifyContent="center"
flexDirection="column"
display="flex"
>
{item.title}
</Box>
<Box
marginLeft={0.8}
justifyContent="center"
flexDirection="column"
display="flex"
>
{expanded[item.path] ? (
<FaChevronDown />
) : (
<FaChevronRight />
)}
</Box>
</Box>
</AccordionToggle>
<Accordion
role="region"
className={expanded[item.path] ? 'expanded' : ''}
>
<NavigationTree
aria-labelledby={item.path}
ariaLabel={`${item.title} subnavigation`}
items={item.children}
path={item.path}
lang={lang}
currentPathname={currentPathname}
isRoot={false}
position={position}
navigationHeights={navigationHeights}
setNavigationHeights={setNavigationHeights}
setPosition={setPosition}
/>
</Accordion>
</Fragment>
)}
</li>
))}
</Nav>
)
}
