All files / src/components/elements Pills.tsx

0% Statements 0/9
0% Branches 0/14
0% Functions 0/3
0% Lines 0/9

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102                                                                                                                                                                                                           
import styled from "styled-components";
import { Flex, Pill, Text } from "rimble-ui";
import { Facebook, LinkedIn, Medium, TwitterBird, YouTube } from "./Icons";
import { baseColors, colors, fonts } from "../../themes";
import { LinkedId } from "../../types";
 
export const ExpiredPill: React.FunctionComponent = () => {
  return (
    <Pill color="danger" cursor="pointer" fontFamily={fonts.sansSerif} height={4} px={5}>
      <Text.span fontSize={0} color={colors.danger.base}>
        Expired
      </Text.span>
    </Pill>
  );
};
 
const PillImg = styled.div`
  align-items: center;
  background-color: ${baseColors.white};
  border: 1px solid ${colors.nearWhite};
  border-radius: 50%;
  display: flex;
  height: 22px;
  justify-content: center;
  overflow: hidden;
  width: 22px;
`;
 
export interface PillWithImgProps {
  icon?: JSX.Element;
  text: string;
  [key: string]: any;
}
 
export const PillWithImg: React.FunctionComponent<PillWithImgProps> = (props) => {
  return (
    <Flex
      alignItems="center"
      bg={colors.nearWhite}
      borderRadius={4}
      fontFamily={fonts.sansSerif}
      height={4}
      justifyContent={props.icon ? "flex-start" : "center"}
    >
      {props.icon ? (
        <>
          <PillImg>{props.icon}</PillImg>
          <Text color={baseColors.black} fontSize={0} pl={2} pr={3}>
            {props.text}
          </Text>
        </>
      ) : (
        <Text color={baseColors.black} fontSize={0} px={3}>
          {props.text}
        </Text>
      )}
    </Flex>
  );
};
 
const StyledLink = styled.a`
  margin-right: 16px;
  text-decoration: none;
`;
 
export interface SocialPillsProps {
  linkedId: LinkedId;
}
 
export const SocialPills: React.FunctionComponent<SocialPillsProps> = (props) => {
  const { linkedId } = props;
  return (
    <>
      {linkedId.platform === "Facebook" ? (
        <StyledLink href={linkedId.proofUrl} target="_blank">
          <PillWithImg icon={<Facebook size="22" />} text={linkedId.linkedId} />
        </StyledLink>
      ) : linkedId.platform === "LinkedIn" ? (
        <StyledLink href={linkedId.proofUrl} target="_blank">
          <PillWithImg icon={<LinkedIn size="22" />} text={linkedId.linkedId} />
        </StyledLink>
      ) : linkedId.platform === "Medium" ? (
        <StyledLink href={linkedId.proofUrl} target="_blank">
          <PillWithImg icon={<Medium size="22" />} text={linkedId.linkedId} />
        </StyledLink>
      ) : linkedId.platform === "Twitter" ? (
        <StyledLink href={linkedId.proofUrl} target="_blank">
          <PillWithImg icon={<TwitterBird size={18} />} text={linkedId.linkedId} />
        </StyledLink>
      ) : linkedId.platform === "Youtube" ? (
        <StyledLink href={linkedId.proofUrl} target="_blank">
          <PillWithImg icon={<YouTube size={20} />} text={linkedId.linkedId} />
        </StyledLink>
      ) : (
        <StyledLink href={linkedId.proofUrl} target="_blank">
          <PillWithImg text={linkedId.linkedId} />
        </StyledLink>
      )}
    </>
  );
};