react-feather#Twitter TypeScript Examples
The following examples show how to use
react-feather#Twitter.
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: ShareModal.tsx From crypto-fees with MIT License | 4 votes |
|
ShareModal: React.FC<ShareModalProps> = ({ open, onClose, data, date }) => {
const [copied, setCopied] = useState(false);
const svgContainer = useRef<any>(null);
// We have to insert the CSS locally so saveSvgAsPng can query fonts
useEffect(() => {
fetch('https://use.typekit.net/jrq0bbf.css')
.then((request: any) => request.text())
.then((css: string) => {
const style = document.createElement('style');
style.appendChild(document.createTextNode(css));
document.head.appendChild(style);
});
}, []);
if (!open) {
return null;
}
const download = async () => {
await saveSvgAsPng(svgContainer.current.firstChild, 'crypofees.png');
};
const copy = async () => {
const uri = await svgAsPngUri(svgContainer.current.firstChild, 'crypofees.png');
const blob = uriToBlob(uri);
// @ts-ignore
navigator.clipboard.write([
// @ts-ignore
new ClipboardItem({ 'image/png': blob }), // eslint-disable-line no-undef
]);
setCopied(true);
setTimeout(() => setCopied(false), 5000);
};
return (
<div className="modal" onClick={onClose}>
<div className="content" onClick={(e: any) => e.stopPropagation()}>
<h2>
<button className="close" onClick={onClose}>
×
</button>
Share
</h2>
<div className="card-border" ref={svgContainer}>
<SocialCard data={data} date={date} />
</div>
<div className="buttons">
<Button
href={`https://twitter.com/intent/tweet?text=${encodeURI(
'CryptoFees.info'
)}&url=${encodeURI(window.location.href)}`}
Icon={Twitter}
>
Share on Twitter
</Button>
<Button onClick={copy} Icon={Copy}>
{copied ? 'Copied' : 'Copy Image'}
</Button>
<Button onClick={download} Icon={Download}>
Download Image
</Button>
</div>
</div>
<style jsx>{`
.modal {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #aaaaaaaa;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.content {
width: 600px;
max-width: 100%;
background: #f9fafc;
padding: 12px;
}
.card-border {
margin: 4px 0;
border: solid 1px #777;
}
h2 {
margin: 0;
}
.close {
border: none;
background: transparent;
float: right;
font-size: 24px;
cursor: pointer;
outline: none;
}
.buttons {
display: flex;
}
.buttons > :global(*) {
margin-right: 4px;
}
`}</style>
</div>
);
}
Example #2
| Source File: SiteFooter.tsx From smart-tracing with Apache License 2.0 | 4 votes |
|
export default function SiteFooter() {
return (
<footer>
<Jumbotron fluid className="bg-indigo-100 mb-0 pb-2">
<Container>
<Row>
<Col md={6}>
<Container>
<Row className="justify-content-start">
<Col xs="auto">
<Image src={Logo} width="300" height="60" alt="Zerobase Logo" />
</Col>
</Row>
<Row>
<Col xs="auto">
<p className="my-3 text-justify">
The Zerobase Foundation is a nonprofit organization whose mission is to
build free, open source public health technology for the good of communities
around the world. Our free, privacy-first contact tracing empowers both
individuals and communities to stop the spread of COVID-19.
</p>
</Col>
</Row>
</Container>
</Col>
<Col>
<Container>
<Row className="justify-content-around">
<Col xs={6}>
<Nav className="flex-column">
<small className="px-3">Information For</small>
<NavLink to="/info/individuals">Individuals</NavLink>
<NavLink to="/info/businesses">Businesses</NavLink>
<NavLink to="/info/communities">Communities</NavLink>
<NavLink to="/info/testingSites">Testing Facilities</NavLink>
</Nav>
</Col>
<Col xs={6}>
<Nav className="flex-column">
<small className="px-3">Zerobase Foundation</small>
<NavLink to="/about">About Us</NavLink>
<NavLink to="/team">Our Team</NavLink>
<Nav.Item>
<Nav.Link href="https://airtable.com/shrnYjRudkIBlXzr9">
Contact Us
</Nav.Link>
</Nav.Item>
<NavLink to="/policies/terms">Terms</NavLink>
<NavLink to="/policies/privacy">Privacy & Cookies Policy</NavLink>
</Nav>
</Col>
</Row>
</Container>
</Col>
</Row>
<Row className="mt-3">
<Col className="d-flex justify-content-md-start justify-content-center" md={6}>
<Nav>
<NavLinkIcon
href="https://github.com/zerobase-io"
icon={<GitHub stroke="#066079" size="2em" />}
/>
<NavLinkIcon
href="https://www.instagram.com/zerobase.io"
icon={<Instagram stroke="#066079" size="2em" />}
/>
<NavLinkIcon
href="https://necsi-edu.slack.com/join/shared_invite/zt-cu5215sg-63h4A7uCy~ehDsrfAIJ~_Q"
icon={<Slack stroke="#066079" size="2em" />}
/>
<NavLinkIcon
href="https://www.linkedin.com/company/zerobase/"
icon={<Linkedin stroke="#066079" size="2em" />}
/>
<NavLinkIcon
href="https://www.twitter.com/zerobaseio"
icon={<Twitter stroke="#066079" size="2em" />}
/>
</Nav>
</Col>
<Col className="d-flex justify-content-md-end justify-content-center" md={6}>
<div className="text-right py-2">
© 2020{' '}
<span>
<Link to="/">Zerobase</Link>.{' '}
</span>
All rights reserved. v3.0.0
</div>
</Col>
</Row>
</Container>
</Jumbotron>
<Container fluid>
<Row
className="bg-p-dark text-white align-items-center justify-content-md-between justify-content-center text-center"
md={2}
xs={1}
>
<Col>
<p className="my-3">Privacy-First Contact Tracing for Communities</p>
</Col>
<Col>
<p className="my-3">
<em>Built for real humans in need by real humans who care.</em>
</p>
</Col>
</Row>
</Container>
</footer>
);
}
