react-icons/fa#FaLinkedin TypeScript Examples

The following examples show how to use react-icons/fa#FaLinkedin. 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: page-footer.tsx    From notebook with MIT License 4 votes vote down vote up 
export function PageFooter() {
  return (
    <SimpleGrid
      flexDirection="column-reverse"
      gridTemplateColumns={["1fr", "1fr", "1fr 1fr", "1fr 1fr"]}
      borderTopWidth={2}
      mt="30px"
      borderTopColor="gray.900"
      pt="20px"
    >
      <Box d={["block", "block", "none", "none"]} mb="30px">
        <FooterSignup />
      </Box>
      <Box>
        <SimpleGrid columns={[1, 1, 2, 2]}>
          <Stack mb={["10px", "10px", 0, 0]}>
            <Text as="span">
              <ExternalFooterLink
                href={`mailto:${siteConfig.author.email}`}
                text="Contact us"
              />
            </Text>
            <Text as="span">
              <ExternalFooterLink
                href={siteConfig.repo.url}
                text="Contribute"
              />
            </Text>
            <Text as="span">
              <InternalFooterLink
                href="/projects"
                text="Open source projects"
              />
            </Text>
          </Stack>
          <Stack>
            <Text as="span">
              <Popover placement="top">
                <PopoverTrigger>
                  <Text
                    as="span"
                    _focus={{ outline: "none", boxShadow: "none" }}
                    fontWeight={500}
                    color="gray.500"
                    cursor="pointer"
                    _hover={{ color: "gray.600", textDecoration: "none" }}
                  >
                    Social Accounts
                  </Text>
                </PopoverTrigger>
                <Portal>
                  <PopoverContent>
                    <PopoverArrow />
                    <PopoverCloseButton />
                    <PopoverBody>
                      <Stack
                        as="footer"
                        isInline
                        spacing={[1, 2]}
                        justifyContent="center"
                        alignItems="center"
                      >
                        <ExternalSocialLink
                          href={siteConfig.author.github}
                          icon={<FaGithub />}
                          type="gray"
                          label="Github Account"
                        />
                        <ExternalSocialLink
                          href={siteConfig.author.dev}
                          icon={<FaDev />}
                          type="gray"
                          label="Dev Account"
                        />
                        <ExternalSocialLink
                          href={siteConfig.author.linkedin}
                          icon={<FaLinkedin />}
                          type="linkedin"
                          label="LinkedIn Account"
                        />
                        <ExternalSocialLink
                          href={siteConfig.author.twitter}
                          icon={<FaTwitter />}
                          type="twitter"
                          label="Twitter Account"
                        />
                        <ExternalSocialLink
                          href={siteConfig.author.quora}
                          icon={<FaQuora />}
                          type="red"
                          label="Quora Account"
                        />
                      </Stack>
                    </PopoverBody>
                  </PopoverContent>
                </Portal>
              </Popover>
            </Text>

            <Text as="span">
              <ExternalFooterLink
                href={`mailto:${siteConfig.author.email}`}
                text="Sponsor"
              />
            </Text>
            <Text as="span">
              <ExternalFooterLink
                href={"/#faqs"}
                isExternal={false}
                text="FAQs"
              />
            </Text>
          </Stack>
        </SimpleGrid>
        <Text mt="20px" color="gray.500">
          Made with ? by{" "}
          <ChakraLink
            _focus={{ boxShadow: "none", outline: "none" }}
            target="_blank"
            href={siteConfig.author.github}
            fontWeight={600}
            color={"gray.400"}
            bgClip="text"
            bgGradient="linear(to-l, #7928CA,#FF0080)"
            _hover={{
              bgGradient: "linear(to-r, red.500, yellow.500)"
            }}
          >
            Muhammad Ahmad
          </ChakraLink>{" "}
        </Text>
      </Box>
      <Box d={["none", "none", "block", "block"]}>
        <FooterSignup />
      </Box>
    </SimpleGrid>
  );
}
Example #2
Source File: index.tsx    From livepeer-com with MIT License 4 votes vote down vote up 
TeamMember = ({
  fullname,
  image,
  role,
  twitter,
  github,
  linkedin,
  medium,
  css = {},
  ...props
}) => {
  const builder = imageUrlBuilder(client as any);

  return (
    <Box
      css={{
        textAlign: "center",
        borderRadius: 24,
        border: "1px solid $colors$neutral5",
        p: 40,
        bc: "$neutral2",
        display: "flex",
        flexDirection: "column",
        justifyContent: "space-between",
        transition: "box-shadow .15s",
        "&:hover": {
          boxShadow:
            "0px 2px 1px rgba(0, 0, 0, 0.04), 0px 16px 40px rgba(0, 0, 0, 0.04)",
        },
        ...css,
      }}
      {...props}>
      <Box>
        <Box
          as={Image}
          css={{
            borderRadius: 1000,
            objectFit: "cover",
          }}
          width={130}
          height={130}
          src={builder.image(image).url()}
        />
        <Box css={{ mb: "$4" }}>
          <Heading
            as="h3"
            css={{
              mb: "$1",
              mt: "$3",
              fontWeight: 500,
              fontSize: "20px",
            }}>
            {fullname}
          </Heading>
          <Text size="3" variant="gray" css={{ color: "$primary9" }}>
            {role}
          </Text>
        </Box>
      </Box>
      <Flex
        css={{
          maxWidth: 120,
          mx: "auto",
          justifyContent: "center",
          alignItems: "center",
        }}>
        {twitter && (
          <A
            css={{
              "&:not(:last-of-type)": { mr: "$3" },
              color: "$hiContrast",
              fontSize: "$3",
              transition: "color .15s",
              "&:hover": { color: "$violet9" },
            }}
            href={twitter}
            target="_blank"
            rel="noopener noreferrer">
            <FaTwitter />
          </A>
        )}
        {linkedin && (
          <A
            css={{
              "&:not(:last-of-type)": { mr: "$3" },
              color: "$hiContrast",
              fontSize: "$3",
              transition: "color .15s",
              "&:hover": { color: "$violet9" },
            }}
            href={linkedin}
            target="_blank"
            rel="noopener noreferrer">
            <FaLinkedin />
          </A>
        )}
        {medium && (
          <A
            css={{
              "&:not(:last-of-type)": { mr: "$3" },
              color: "$hiContrast",
              fontSize: "$3",
              transition: "color .15s",
              "&:hover": { color: "$violet9" },
            }}
            href={medium}
            target="_blank"
            rel="noopener noreferrer">
            <FaMedium />
          </A>
        )}
        {github && (
          <A
            css={{
              "&:not(:last-of-type)": { mr: "$3" },
              color: "$hiContrast",
              fontSize: "$3",
              transition: "color .15s",
              "&:hover": { color: "$violet9" },
            }}
            href={github}
            target="_blank"
            rel="noopener noreferrer">
            <FaGithub />
          </A>
        )}
      </Flex>
    </Box>
  );
}