react-icons/fa#FaInstagram TypeScript Examples
The following examples show how to use
react-icons/fa#FaInstagram.
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: socialLink.ts From midway with MIT License | 6 votes |
getIcon = icon => {
switch (icon) {
case 'Apple':
return FaApple
case 'facebook':
return FaFacebookF
case 'instagram':
return FaInstagram
case 'Soundcloud':
return FaSoundcloud
case 'Spotify':
return FaSpotify
case 'twitter':
return FaTwitter
case 'youtube':
return FaYoutube
case 'linkedin':
return FaLinkedinIn
case 'github':
return FaGithub
default:
return false
}
}
Example #2
Source File: linktreeList.tsx From dhafit.xyz with MIT License | 6 votes |
linktreeList = [
{ href: "https://twitter.com/DhafitF", text: "Twitter", icon: <FaTwitter /> },
{
href: "https://trakteer.id/dhafid",
text: "Trakteer",
icon: <Image src="/assets/icon/lines-trakteer-icon.png" alt="Trakteer logo" width="100%" height="100%" />,
},
{ href: "https://www.instagram.com/dhafitf", text: "Instagram", icon: <FaInstagram /> },
{ href: "https://www.nogisub.com/", text: "Fansub", icon: <FaBloggerB /> },
{ href: "https://www.facebook.com/dhafid.farenza", text: "Facebook", icon: <FaFacebookF /> },
{ href: "https://github.com/dhafitf", text: "Github", icon: <FaGithub /> },
{ href: "https://www.youtube.com/c/dhafitfarenza", text: "Facebook", icon: <FaYoutube /> },
]
Example #3
Source File: Links.tsx From app with MIT License | 6 votes |
Content = (props: Props) => {
return (
<div className="links">
{props.data['電話番号']?<div className="link"><a href={`tel:${props.data['電話番号']}`}><FaPhone onClick={noop} size="20px" /></a></div>:''}
{props.data['Instagram']?<div className="link"><a href={`https://instagram.com/${props.data['Instagram']}`}><FaInstagram onClick={noop} size="20px" /></a></div>:''}
{props.data['Twitter']?<div className="link"><a href={`https://twitter.com/${props.data['Twitter']}`}><FaTwitter onClick={noop} size="20px" /></a></div>:''}
{props.data['公式サイト']?<div className="link"><a href={props.data['公式サイト']}><FaHome onClick={noop} size="20px" /></a></div>:''}
</div>
);
}
Example #4
Source File: SocialLinkInput.tsx From convoychat with GNU General Public License v3.0 | 5 votes |
ICON_MAP: Record<ILinkTypes, any> = {
github: FaGithub,
twitter: FaTwitter,
instagram: FaInstagram,
website: FaGlobe,
}
Example #5
Source File: socmedList.tsx From dhafit.xyz with MIT License | 5 votes |
socmedList: any = [
{ text: "Facebook", icon: <FaFacebookF />, href: "https://www.facebook.com/dhafid.farenza", background: "#4267B2" },
{ text: "Instagram", icon: <FaInstagram />, href: "https://www.instagram.com/dhafitf", background: "#E1306C" },
{ text: "Twitter", icon: <FaTwitter />, href: "https://twitter.com/DhafitF", background: "#1DA1F2" },
{ text: "Github", icon: <FaGithub />, href: "https://github.com/dhafitf", background: "#333333" },
]
Example #6
Source File: index.tsx From Frontend with MIT License | 4 votes |
IndexPage: React.FunctionComponent<PageProps> = () => {
const { isLoggedIn } = useAuth();
return (
<Layout>
<SEO />
<Heading mt={12} fontSize="50px">
Contact Tracing
</Heading>
<Lead>Keep the ones you love informed if you fall ill.</Lead>
<Button
variantColor="teal"
size="lg"
onClick={() => {
if (!isLoggedIn) {
navigate(`/me/sign-in?next=/me/share`);
} else {
navigate(`/me/share`);
}
}}
>
Share your free profile
</Button>
<Box maxWidth="40em" mt={8} mb={12}>
<P>
Keeping everyone up-to-date if you fall ill is tricky. You have to
remember who you met. They have to remember who they met after meeting
you.
</P>
<P>
In one click, Contact Tracing App notifies your recent direct and
indirect contacts if you log that you show symptoms or test positive,
so everyone can act appropriately and we can help limit the spread of
COVID-19.
</P>
</Box>
<ResponsiveContainer>
<Box
as="iframe"
position="absolute"
top={0}
left={0}
width="100%"
height="100%"
src="https://www.youtube-nocookie.com/embed/Xid1f5F3ogI"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
/>
</ResponsiveContainer>
<Box maxWidth="40em" mt={12}>
<P>#KeepTracingCOVID19</P>
<Heading as="h2" mt={12} mb={4} size="xl">
How it works
</Heading>
<List styleType="disc">
<ListItem>
Log Contact - Digital Logbook that makes it easier to trace who you
met.
</ListItem>
<ListItem>
Notify your loved one if you fall ill with no hassle.
</ListItem>
<ListItem>
Get notified when one of your family and friends (and their
contacts) shows symptoms, or tested positive.
</ListItem>
<ListItem>Your risk level - based on contacts around you.</ListItem>
</List>
<Heading as="h2" mt={12} mb={4} size="xl">
What's next for "Contact Tracing"
</Heading>
<List styleType="disc">
<ListItem>Location Logging - Checkin.</ListItem>
<ListItem>Users’ Risk Levels.</ListItem>
<ListItem>i18n</ListItem>
<ListItem>UX/UI Improvements.</ListItem>
<ListItem>UNative Mobile App.</ListItem>
</List>
<Box p={[5, 10]} my={12} shadow="sm" borderWidth="1px">
<Heading as="h2" mb={4} size="xl">
Help us spread the word
</Heading>
<P>
The more users, connections, and logging we do, the better Contact
Tracing will be. Help us spread the word and build and grow.
</P>
<Stack mt={8} isInline>
<Box>
<a href="https://www.facebook.com/ContactTracingApp/">
{<FaFacebook />}
</a>
</Box>
<Box>
<a href="https://www.instagram.com/contacttracing.app/">
{<FaInstagram />}
</a>
</Box>
<Box>
<a href="https://twitter.com/ContactTracing_">{<FaTwitter />}</a>
</Box>
</Stack>
<Button
mt={8}
variantColor="teal"
size="sm"
onClick={() => {
if (!isLoggedIn) {
navigate(`/me/sign-in?next=/me/share`);
} else {
navigate(`/me/share`);
}
}}
>
Share your Profile
</Button>
</Box>
<Heading as="h2" mt={12} mb={4} size="xl">
About the team
</Heading>
<Heading as="h3" mt={12} mb={4} size="md">
Background
</Heading>
<P>
In the light of COVID-19, Michele and I have been asking each other
“how can we help?”, “what can we do to help?”, “How can we protect our
loved ones?”
</P>
<P>
Hoping to keep people safe and limit the spread of COVID-19, we
decided to work on “Contact Tracing”. The concept is simple - if we
get infected, we want to be able to notify family, friends, and
everyone we’ve seen in the past two weeks (or even past month) as
quickly as possible, likewise. So everyone can act appropriately,
either get tested or stay isolated.
</P>
<P>
It all started in our 35sqm flat in London - our weekend hack (which
has already taken weekends and weekdays).
</P>
<Heading as="h3" mt={12} mb={4} size="md">
Our aims
</Heading>
<List styleType="disc">
<ListItem>To protect our loved ones.</ListItem>
<ListItem>To help limit the spread of COVID-19.</ListItem>
</List>
<Heading as="h3" mt={12} mb={4} size="md">
Founding Members
</Heading>
<Stack spacing={2}>
<Box>
<Flex height={12} width="auto" alignItems="center">
<Avatar name="Ponk Memoli" src={ponk} />
<Box
ml="2"
mt="1"
fontWeight="semibold"
as="h4"
lineHeight="tight"
isTruncated
>
Ponk Memoli
</Box>
</Flex>
</Box>
<Box>
<Flex height={12} width="auto" alignItems="center">
<Avatar name="Michele Memoli" src={michele} />
<Box
ml="2"
mt="1"
fontWeight="semibold"
as="h4"
lineHeight="tight"
isTruncated
>
Michele Memoli
</Box>
</Flex>
</Box>
</Stack>
<Stack spacing={2}>
<Box>
<Flex height={12} width="auto" alignItems="center">
<Avatar name="Ponk Memoli" src={ponk} />
<Box
ml="2"
mt="1"
fontWeight="semibold"
as="h4"
lineHeight="tight"
isTruncated
>
Ponk Memoli
</Box>
</Flex>
</Box>
<Box>
<Flex height={12} width="auto" alignItems="center">
<Avatar name="Michele Memoli" src={michele} />
<Box
ml="2"
mt="1"
fontWeight="semibold"
as="h4"
lineHeight="tight"
isTruncated
>
Michele Memoli
</Box>
</Flex>
</Box>
</Stack>
<Heading as="h4" mt={12} mb={4} size="sm">
Contributors
</Heading>
<List styleType="disc">
<ListItem>Kumar Rangasamy</ListItem>
<ListItem>Yogen (Fira Cloud Tech)</ListItem>
<ListItem>Juntima Nawilaijaroen</ListItem>
<ListItem>Max Sarasri</ListItem>
<ListItem>Vero Rebagliatte</ListItem>
<ListItem>Phark Lertchanyakul</ListItem>
<ListItem>Sunhaporn Sribanditmongkol</ListItem>
<ListItem>Panos Kollias</ListItem>
<ListItem>Longyu Guan</ListItem>
<ListItem>Lisa Bang</ListItem>
<ListItem>Jenny Park</ListItem>
<ListItem>Mudhafar Ormzyar</ListItem>
<ListItem>Kevin Amick</ListItem>
<ListItem>Bruno Caldeira</ListItem>
<ListItem>Furkan Kurtay</ListItem>
</List>
<Heading as="h4" mt={12} mb={4} size="sm">
Cloud providers
</Heading>
<P>
These guys helped us out by giving us free credits to build on their
infrastructure:
</P>
<List styleType="disc">
<ListItem>Neo4j</ListItem>
<ListItem>DigitialOcean</ListItem>
<ListItem>Twilio</ListItem>
</List>
</Box>
</Layout>
);
}
Example #7
Source File: footer.tsx From opensea-whitelabel-website-template with MIT License | 4 votes |
function Footer ({size}) {
const [css, theme] = useStyletron()
return (
<div
className={css({
backgroundColor: theme.colors.primaryB,
width: 100,
paddingTop: theme.sizing.scale800,
paddingBottom: theme.sizing.scale800,
boxShadow: 'rgb(0 0 0 / 8%) 0px -1px 0px',
})}
>
<Grid
behavior={BEHAVIOR.fixed}
gridGaps={20}
gridColumns={[6, 6, 12, 12]}
>
<Cell
span={6}
overrides={{
Cell: {
style: {
display: 'flex !important',
flexDirection: 'column',
alignItems: size.width <= 1136 ? 'center' : 'flex-start',
},
},
}}
>
<LabelSmall className={css({color: theme.colors.contentPrimary})}>
{process.env.NEXT_PUBLIC_COPYRIGHT_TEXT}
</LabelSmall>
<div style={{marginTop: 10}}>
{ process.env.NEXT_PUBLIC_TWITTER && process.env.NEXT_PUBLIC_TWITTER != "" &&
<a href={`${process.env.NEXT_PUBLIC_TWITTER}`} target='_blank'>
<FaTwitter
style={{width: 30, height: 30}}
color={theme.colors.contentPrimary}
/>
</a>
}
{ process.env.NEXT_PUBLIC_INSTAGRAM && process.env.NEXT_PUBLIC_INSTAGRAM != "" &&
<a href={`${process.env.NEXT_PUBLIC_INSTAGRAM}`} target='_blank'>
<FaInstagram
href={process.env.NEXT_PUBLIC_INSTAGRAM}
style={{width: 30, height: 30, marginLeft: 10}}
color={theme.colors.contentPrimary}
/>
</a>}
{ process.env.NEXT_PUBLIC_GITHUB && process.env.NEXT_PUBLIC_GITHUB != "" &&
<a href={`${process.env.NEXT_PUBLIC_GITHUB}`} target='_blank'>
<FaGithub
style={{width: 30, height: 30, marginLeft: 10}}
color={theme.colors.contentPrimary}
/>
</a>}
</div>
</Cell>
<Cell
span={6}
overrides={{
Cell: {
style: {
display: 'flex !important',
flexDirection: 'column',
alignItems: size.width <= 1136 ? 'center' : 'flex-end',
},
},
}}
>
<LabelSmall className={css({color: theme.colors.contentPrimary})}>
Created with OpenSea whitelable template
</LabelSmall>
<div style={{marginTop: 10}} />
<a
href='https://github.com/nawangwe/opensea-whitelabel-website-template'
target='_blank'
>
<FaGithub
style={{width: 30, height: 30}}
color={theme.colors.contentPrimary}
/>
</a>
</Cell>
</Grid>
</div>
)
}