react-icons/fa#FaDownload JavaScript Examples
The following examples show how to use
react-icons/fa#FaDownload.
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: index.js From layer5-ng with Apache License 2.0 | 6 votes |
|
BannerDefault = () => {
return (
<BannerSectionWrapper>
<ParticleComponent />
<Container fullWidthSM>
<Row>
<Col sm={7} md={6} lg={7}>
<SectionTitle
className="section-title"
leftAlign={true}
UniWidth="100%"
>
<h4>30% off for new users for 1 month</h4>
<h1>
Drive Customers Passing Your Appslife With <span>Appion</span>
</h1>
</SectionTitle>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua enim ad
minim veniam quis nostrud exercitation.
</p>
<VintageBox right={true} vintageOne={true}>
<Button className="banner-btn one">
<FaDownload className="icon-left" />
Run Meshery
</Button>
<Button className="banner-btn two">
<FaPlay className="icon-left" /> Watch Now
</Button>
</VintageBox>
</Col>
</Row>
</Container>
</BannerSectionWrapper>
);
}
Example #2
| Source File: index.js From layer5-ng with Apache License 2.0 | 5 votes |
|
BannerClassic = () => {
return (
<BannerSectionWrapper>
<Container>
<Row Vcenter={true}>
<Col sm={12} sm={7}>
<SectionTitle
className="section-title"
leftAlign={true}
UniWidth="100%"
>
<h4>
{" "}
<span> 50% </span> off for new users for 1 month
</h4>
<h1>
Drive Customers Passing Your Appslife With <span>Appion</span>
</h1>
</SectionTitle>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua enim ad
minim veniam quis nostrud exercitation.
</p>
<VintageBox right={true} vintageOne={true}>
<Button className="banner-btn one">
<FaDownload className="icon-left" />
Run Meshery
</Button>
<Button className="banner-btn two">
<FaPlay className="icon-left" /> Watch Now
</Button>
</VintageBox>
</Col>
<Col sm={12} sm={5}>
<div className="app-screen-image-wrapper">
<img src={AppScreenImage} alt="prime app screen" />
<div className="thumb one">
<img src={AppScreenThumb1} alt="prime app screen" />
</div>
<div className="thumb two">
<img src={AppScreenThumb2} alt="prime app screen" />
</div>
</div>
</Col>
</Row>
</Container>
</BannerSectionWrapper>
);
}
Example #3
| Source File: index.js From layer5-ng with Apache License 2.0 | 5 votes |
|
BannerModern = () => {
return (
<BannerSectionWrapper>
<ParticleComponent />
<Container fullWidthSM>
<Row Vcenter={true}>
<Col sm={7} md={6}>
<SectionTitle
className="section-title"
leftAlign={true}
UniWidth="100%"
>
<h4>30% off for new users for 1 month</h4>
<h1>
Drive Customers Passing Your Appslife With <span>Appion</span>
</h1>
</SectionTitle>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua enim ad
minim veniam quis nostrud exercitation.
</p>
<VintageBox right={true} vintageOne={true}>
<Button className="banner-btn one">
<FaDownload className="icon-left" />
Run Meshery
</Button>
<Button className="banner-btn two">
<FaPlay className="icon-left" /> Watch Now
</Button>
</VintageBox>
</Col>
<Col sm={5} md={6}>
<img
src={imgHero}
className="hero-img"
alt="prime-app hero image"
/>
</Col>
</Row>
</Container>
</BannerSectionWrapper>
);
}
Example #4
| Source File: Navigation.js From portfolio-react with MIT License | 5 votes |
|
// import ResumeModal from "./ResumeModal";
function Navigation() {
const [showResumeModal, setShowResumeModal] = useState(false)
return (
<React.Fragment>
<Navbar variant='dark' expand='lg' fixed='top' className='nvabar-custon'>
<a href='/' className='navbar_logo_container'>
<img src={PortfolioLogo} className='navbar_logo' alt='navbar_logo' />
<span>Pranjal Jain</span>
</a>
<Navbar.Toggle aria-controls='basic-navbar-nav' />
<Navbar.Collapse id='basic-navbar-nav'>
<Nav className='mr-auto'></Nav>
<Nav className='navbar-right'>
<Nav.Link href='http://blog.pranjaljain.me'>
<Button className='moving-gradient'>Blogs</Button>
</Nav.Link>
<Nav.Link>
<Button
variant='light'
style={{
borderRadius: '4px 0 0 4px',
borderRight: '1px solid rgba(0,0,0,0.5)',
}}
onClick={() => {
setShowResumeModal(true)
}}>
Curriculum Vitae (CV)
</Button>
<Button
variant='light'
href='https://github.com/pranjaljain0/pranjaljain0/raw/master/Pranjal_Jain_CV.pdf'
style={{
borderRadius: '0 4px 4px 0',
}}
aria-label='Resume'>
<FaDownload
aria-label='Resume'
fill='rgba(0,0,0,0.5)'
onClick={() =>
(window.location =
'https://github.com/pranjaljain0/pranjaljain0/raw/master/Pranjal_Jain_CV.pdf')
}
/>
</Button>
</Nav.Link>
<Nav.Link
aria-label='Github'
href='https://github.com/pranjaljain0'>
<FaGithub
aria-label='Github'
color='rgba(255,255,255,0.8)'
size='1.5em'
/>
</Nav.Link>
<Nav.Link
aria-label='Linked In'
href='https://www.linkedin.com/in/pranjaljain0/'>
<FaLinkedin
aria-label='Linked In'
color='rgba(255,255,255,0.8)'
size='1.5em'
/>
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
<ResumeModal
showResumeModal={showResumeModal}
closeModal={() => {
setShowResumeModal(!showResumeModal)
}}
/>
</React.Fragment>
)
}
Example #5
| Source File: WalletDownloaders.js From testnets-cardano-org with MIT License | 4 votes |
|
WalletDownloaders = ({ gaCategory, settingsEndpoint }) => {
const [ platformsData, setPlatformsData ] = useState(null)
const [ loading, setLoading ] = useState(true)
const [ hasError, setHasError ] = useState(false)
const [ activeModal, setActiveModal ] = useState('')
const checksumRefs = {
windows: useRef(null),
darwin: useRef(null),
linux: useRef(null)
}
const validateData = (data) => {
if (!data.platforms) return false
const validPlatforms = [ 'windows', 'darwin', 'linux' ]
if (Object.keys(data.platforms).length !== validPlatforms.length) return false
let valid = true
validPlatforms.forEach(platform => {
if (!data.platforms[platform]) {
valid = false
} else {
const validKeys = [ 'signature', 'hash', 'URL', 'version', 'SHA256' ]
if (Object.keys(data.platforms[platform]).length !== validKeys.length) {
valid = false
} else {
validKeys.forEach(key => {
if (typeof data.platforms[platform][key] !== 'string' || !data.platforms[platform][key]) valid = false
})
}
}
})
return valid
}
const loadDaedalusData = async () => {
try {
setLoading(true)
const result = await fetch(settingsEndpoint)
const jsonResult = await result.json()
if (!validateData(jsonResult)) throw new Error('Invalid data')
setPlatformsData(Object.keys(jsonResult.platforms).map(platform => ({ ...jsonResult.platforms[platform], key: platform })))
setLoading(false)
} catch (error) {
console.error(error.message, error)
analytics.exception({ description: error.message, fatal: false, args: [ settingsEndpoint ], error })
setHasError(true)
setLoading(false)
}
}
useEffect(() => {
loadDaedalusData()
}, [])
const getOrderedPlatforms = (order) => {
const platforms = []
order.forEach(platform => {
platforms.push(platformsData.filter(({ key }) => platform === key).shift())
})
return platforms.filter(platform => Boolean(platform))
}
const checksumOnClick = (SHA256, platform, version) => (e) => {
e.preventDefault()
analytics.click({ category: gaCategory, label: `checksum_copy_${platform}_${version}`, event: e })
const el = checksumRefs[platform].current
if (!el) return
el.select()
el.setSelectionRange(0, SHA256.length)
document.execCommand('copy')
}
const openModal = (name) => (e) => {
e.preventDefault()
setActiveModal(name)
}
const getFilename = (URL) => URL.replace(/^.*\/(.*?)$/, '$1')
const renderTemplateString = (content, { SHA256, URL, version, hash, signature }) => {
const params = {
sha256: SHA256,
version,
hash,
signature,
filename: getFilename(URL)
}
return content.replace(/{{\s?([^}\s]+)\s?}}/g, (original, key) => {
return params[key] || original
})
}
const getPGPFilename = (URL) => `${getFilename(URL)}.asc`
const getPGPBlob = (signature) => window.Blob && new window.Blob([ signature ], { type: 'text/txt' })
const getPGPSignatureHref = (signature) => {
const blob = getPGPBlob(signature)
return blob ? URL.createObjectURL(blob) : '#'
}
const onDownloadPGPSignature = (signature, URL) => (e) => {
if (window.navigator.msSaveBlob || e.target.href === '#') e.preventDefault()
if (window.navigator.msSaveBlob) window.navigator.msSaveBlob(getPGPBlob(signature), getPGPFilename(URL))
}
const unCacheURL = (url) => {
return url + '?t=' + (new Date().getTime())
}
return (
<GlobalContentQuery
render={content => (
<Box marginTop={4} marginBottom={4}>
{platformsData && !hasError && !loading &&
<Container>
{getOrderedPlatforms(content.downloaders_content.platforms_order.map(platform => platform.platform_name)).map(({ key, signature, hash, URL, version, SHA256 }) => (
<Box flex={1} key={key} display='flex' flexDirection='column' justifyContent='flex-end' textAlign='center'>
<span><strong>{content.downloaders_content[key].full_label}</strong></span>
<span>{content.downloaders_content.version}: {version}</span>
<Box marginTop={1} marginBottom={1}>
<Button
component={Link}
href={unCacheURL(URL)}
variant='contained'
color='primary'
tracking={{ category: gaCategory, label: `download_${key}_${version}` }}
>
{content.downloaders_content[key].short_label}<Box component='span' marginLeft={1}><FaDownload /></Box>
</Button>
</Box>
<Box>
<span>{content.downloaders_content.sha_checksum}</span>
<ChecksumArea
ref={checksumRefs[key]}
title={content.downloaders_content.copy_to_clipboard}
onClick={checksumOnClick(SHA256, key, version)}
aria-label={content.downloaders_content.copy_to_clipboard}
value={SHA256}
readOnly
rows={3}
/>
<Link
href='#'
onClick={openModal(`${key}_checksum`)}
tracking={{ category: gaCategory, label: `view_checksum_instructions_${key}_${version}` }}
>
{content.downloaders_content.verify_checksum}
</Link>
<Modal
open={activeModal === `${key}_checksum`}
onClose={openModal('')}
disableScrollLock
>
<ModalContent>
<CloseModal
href='#'
onClick={openModal('')}
>
<MdClose />
</CloseModal>
<ModalContentInner>
<Markdown
source={renderTemplateString(content.downloaders_content[key].checksum_instructions, { SHA256, signature, hash, URL, version })}
/>
</ModalContentInner>
</ModalContent>
</Modal>
</Box>
<Box marginTop={1}>
<Link
onClick={onDownloadPGPSignature(signature, URL)}
tracking={{ category: gaCategory, label: `download_pgp_signature_${key}_${version}` }}
href={getPGPSignatureHref(signature)}
download={getPGPFilename(URL)}
>
{content.downloaders_content.pgp_signature}<Box marginLeft={1} component='span'><FaDownload /></Box>
</Link>
<Box>
<Link
href='#'
onClick={openModal(`${key}_pgp`)}
tracking={{ category: gaCategory, label: `view_pgp_instructions_${key}_${version}` }}
>
{content.downloaders_content.verify_signature}
</Link>
<Modal
open={activeModal === `${key}_pgp`}
onClose={openModal('')}
disableScrollLock
>
<ModalContent>
<CloseModal
href='#'
onClick={openModal('')}
>
<MdClose />
</CloseModal>
<ModalContentInner>
<Markdown
source={renderTemplateString(content.downloaders_content[key].signature_instructions, { SHA256, signature, hash, URL, version })}
/>
</ModalContentInner>
</ModalContent>
</Modal>
</Box>
</Box>
</Box>
))}
</Container>
}
{loading &&
<LoadingContainer>
<div>
<CircularProgress />
</div>
</LoadingContainer>
}
{hasError &&
<ErrorContainer pl={12} pr={12}>
<Typography variant='h1' color='error'><FaCogs /></Typography>
<Typography variant='h3' color='error'>{content.downloaders_content.no_releases_available}</Typography>
</ErrorContainer>
}
</Box>
)}
/>
)
}
Example #6
| Source File: LeftPanel.js From sailplane-web with GNU General Public License v3.0 | 4 votes |
|
export function LeftPanel({
setCurrentRightPanel,
currentRightPanel,
isDownload,
}) {
const isSmallScreen = useIsSmallScreen();
const [isMobileOpen, setIsMobileOpen] = useState(false);
const styles = {
container: {
position: 'relative',
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
backgroundColor: primary45,
color: '#FFF',
padding: `${isSmallScreen ? 8 : 20}px 10px 0px 10px`,
minWidth: 200,
fontFamily: 'Open Sans',
paddingBottom: 0,
},
logo: {
display: 'inline-block',
fontFamily: 'MuseoModerno',
color: '#FFF',
fontSize: 24,
fontWeight: 400,
marginBottom: isSmallScreen && !isMobileOpen ? 8 : 20,
textAlign: 'center',
justifyContent: 'center',
alignItems: 'center',
userSelect: 'none',
cursor: 'pointer',
lineHeight: '24px',
},
settingsBlock: {
bottom: 0,
width: '100%',
},
mobilePadding: {
paddingBottom: 6,
},
menuIcon: {
position: 'absolute',
top: isSmallScreen ? 16 : 25,
left: 14,
},
logoContainer: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
footer: {
textAlign: 'center',
marginBottom: 8,
fontSize: 13,
lineHeight: '14px',
fontFamily: 'Open Sans',
},
iconGithub: {
cursor: 'pointer',
},
githubTxt: {
fontSize: 10,
userSelect: 'none',
},
icon: {
position: 'relative',
top: 6,
width: 30,
},
logoTitle: {
display: 'inline-flex',
},
};
let iconComponent = FaBars;
if (isMobileOpen) {
iconComponent = FaTimes;
}
const IconComponent = iconComponent;
return (
<div style={styles.container}>
{isSmallScreen ? (
<IconComponent
color={'#FFF'}
size={24}
style={styles.menuIcon}
onClick={() => {
setIsMobileOpen(!isMobileOpen);
}}
/>
) : null}
<div>
<div style={styles.logoContainer}>
<div
style={styles.logo}
onClick={() => {
document.location = `${
window.location.origin + window.location.pathname
}`;
}}>
<img src={logo} style={styles.icon} />
<div style={styles.logoTitle}>Sailplane</div>
</div>
</div>
{(isMobileOpen || !isSmallScreen) && !isDownload ? (
<>
<PanelItem
title={'Files'}
iconComponent={FaFolderOpen}
selected={currentRightPanel === 'files'}
onClick={() => {
setIsMobileOpen(false);
setCurrentRightPanel('files');
}}
/>
<PanelItem
title={'Drives'}
iconComponent={FaServer}
selected={currentRightPanel === 'instances'}
onClick={() => {
setIsMobileOpen(false);
setCurrentRightPanel('instances');
}}
/>
<PanelItem
title={'Contacts'}
iconComponent={FaAddressBook}
selected={currentRightPanel === 'contacts'}
onClick={() => {
setIsMobileOpen(false);
setCurrentRightPanel('contacts');
}}
/>
{/*<div style={styles.settingsBlock}>*/}
{/* <PanelItem*/}
{/* title={'Settings'}*/}
{/* selected={currentRightPanel === 'settings'}*/}
{/* onClick={() => setCurrentRightPanel('settings')}*/}
{/* iconComponent={FaCog}*/}
{/* />*/}
{/*</div>*/}
</>
) : (
<div style={styles.mobilePadding} />
)}
{isDownload ? (
<>
<div style={styles.settingsBlock}>
<PanelItem
title={'Home'}
onClick={() =>
(document.location =
'https://cypsela.github.io/sailplane-web/#/')
}
iconComponent={FaHome}
/>
</div>
<div style={styles.settingsBlock}>
<PanelItem
title={'Downloads'}
onClick={() => {}}
iconComponent={FaDownload}
selected={true}
/>
</div>
</>
) : null}
</div>
{!isSmallScreen ? (
<div style={styles.footer}>
<a
href={'https://github.com/cypsela/sailplane-web'}
target={'_blank'}
rel={'noopener'}>
<FaGithub color={primary15} size={20} style={styles.iconGithub} />
</a>
<div style={styles.githubTxt}>Source</div>
</div>
) : null}
</div>
);
}
